functionrandH(min,max) {
returnMath.floor(Math.random()*(max-min+1)+min);
}
varflow=document.getElementById("flow");
//左邊距
varleftSpace=10;
//間距
varpaddingSpace=10;
//高度數(shù)組哮笆，保存每個li的高度
varhs=[];
//布局函數(shù)
//當我bol為假時，更新的數(shù)組
functionbuju(bol) {
//獲取所有的li用于大小改變時，更新布局
varlis=document.getElementsByTagName("li");
//根據(jù)自己的documentElement.clientWidth計算出來你有多少列
varcols=parseInt(document.documentElement.clientWidth/200);
flow.style.width=cols*200;
//初始化列高數(shù)組
vararrH=[];
for(vari=0; i
arrH[i]=0;
}
//創(chuàng)建或者更新li
for(varj=0; j<20; j++) {
varli=lis[j]||document.createElement("li");
li.innerHTML=j;
varh=hs[j]||randH(100,300);
li.style.height=h+"px";
if(bol) {
hs.push(h);
}
//求最短列
varminH=arrH[0];
varminI=0;
for(vark=0; k
if(minH>arrH[k]) {
minH=arrH[k];
minI=k;
}
}
//設置left
li.style.left=leftSpace+minI*(200+paddingSpace)+"px";
//設置top
li.style.top=arrH[minI]+"px";
//第一次頁面加載執(zhí)行的時候才睹，才執(zhí)行appendChild添加
if(bol) {
flow.appendChild(li);
}
//更新高度
arrH[minI]=arrH[minI]+li.offsetHeight+paddingSpace;
}
}
//第一次創(chuàng)建這些li
buju(true);
window.onresize=function() {
//更新
buju(false);
}
