移动版瀑布流js

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);

}