瀑布流的实现

window.onload = function(){

waterFall("warp");

}

window.onresize = function(){

waterFall("warp");

}

function waterFall(element,space,children){

if(!element){

return;

}

space = space || 10;

children = children || "div";

var warp = warp.getElementById(element);

war water = warp.getElementsByTagName(children); //子元素的宽度

var spaceWidth = water[0].offsetWidth;//大盒子的宽度

var colNum = Math.floor(warpWidth/spaceWidth);

var padding = Math.floor((warpwidth-colNum*spaceWidth)/(colNum+1));

var column = new Array();

var maxHeight = 0;

for(var i=0;i<colNum;i++){

column[i] = new object();

column[i].top = space;

column[i].left = (spaceWidth *i) + padding*(i+1); //计算各列距离左侧的距离

}

for(var i=0;i < water.length;i++){

//计算元素属于第几列

if((i+1)%colNum == 0){

sub = colNum;

}else{

sum = (i+1)%colNum;

}

water[i].style.position = "absolute";

water[i].style.top = column[sub-1].top+"px";

water[i].style.left = column[sub-1].left+"px";

column[sub-1].top += water[i].offsetHeight + space;

}

for(war i=0;i<colNum;i++){

if(column[i].top>maxHeight){

maxHeigth = column[i].top;

}

}

warp.style.height = maxHeight + "px";

}