functionrandH(min,max) {
returnMath.floor(Math.random()*(max-min+1)+min);
}
varflow=document.getElementById("flow");
//左边距
varleftSpace=10;
//间距
varpaddingSpace=10;
//高度数组，保存每个li的高度
varhs=[];
//布局函数
//当我bol为假时，更新的数组
functionbuju(bol) {
//获取所有的li用于大小改变时，更新布局
varlis=document.getElementsByTagName("li");
//根据自己的documentElement.clientWidth计算出来你有多少列
varcols=parseInt(document.documentElement.clientWidth/200);
flow.style.width=cols*200;
//初始化列高数组
vararrH=[];
for(vari=0; i
arrH[i]=0;
}
//创建或者更新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";
//第一次页面加载执行的时候，才执行appendChild添加
if(bol) {
flow.appendChild(li);
}
//更新高度
arrH[minI]=arrH[minI]+li.offsetHeight+paddingSpace;
}
}
//第一次创建这些li
buju(true);
window.onresize=function() {
//更新
buju(false);
}
