window.onload=function(){
waterfall("main","box");
// body...
}
function waterfall(parent,box){
var oparent=document.getElementById('parent');
var oBoxs=getByClass(oparent,box);
var oBoxW=oBoxs[0].offsetWidth;
var cols=Math.floor((document.documentElements.clientWidth/oBoxW));
oparent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;";
var hArr=[];
for (var i=0;i<oBoxs.length;i++){
if (i<cols) {
hArr.push(oBoxs[i].offsetHeight);
}
else{
var minH=Math.min.apply(null,hArr);
var index=getMinhIndex(hArr,minH);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
function getByClass(parent,clsName){
var boxArr=new Array();
oElements=parent.getElementsByTagName('*');
for (var i = 0; i < oElements.length; i++) {
if (oElements[i].className==clsName) {
boxArr.push(oElements[i])
}
};
return boxArr;
}
function getMinhIndex(arr,val){
for (var i in arr)
{
if (arr[i]==val) {
return i;
}
}
}
无状态三次方
相关分类