<script?type="text/javascript">
window.onload=function(){
waterfall('main','box');
}
function?waterfall(parent,box){
//將main下的所有class為box的元素取出來
var?oParent=document.getElementById(parent);//取出大盒子
var?oBoxs=getByClass(oParent,box);
var?oBoxW=oBoxs[0].offsetWidth;
//計算整個頁面顯示的列數（頁面寬/box寬）
var?clos=Math.floor(document.documentElement.clientWidth/oBoxW);
//設置大盒子main的寬度
oParent.style.cssText='width:'+oBoxW*clos+'px;margin:0?auto';
var?hArr=[];//存放每一列高度的數組
for?(var?i?=?0;?i?<?oBoxs.length;i++)?{
if(i<clos){
hArr.push(oBoxs[i].offsetHeight);
}else{
var?minH=Math.min.apply(null,hArr);
//console.log(minH);打印
var?index=getMinhIndex(hArr,minH)
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
//oBoxs[i].style.left=oBoxW*index+'px';//方法一
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';//方法二
hArr[index]+=oBoxs[i].offsetHeight();
}
};
console.log(hArr);
}
//根據class獲取元素--封裝
function?getByClass(parent,clasName){
var?boxArr=new?Array(),//用來存儲獲取到的所有class為box的元素
oElements=parent.getElementsByTagName('*');
for?(var?i?=?0;?i?<?oElements.length;?i++)?{
if?(oElements[i].className==clasName)?{
boxArr.push(oElements[i]);
};
};
return?boxArr;
}
function?getMinhIndex(arr,val){
for?(var?i?in?arr)?{
if?(arr[i]==val)?{
return?i;
}?else{};
};
}
</script>