window.onload=function(){
waterfall("main","box");
}
function waterfall(parent,box){
//將main下的所有class為box取出來
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
//計算頁面可以放的列數(shù)
var oBoxW=oBoxs[0].offsetWidth;
var clos=Math.floor(document.documentElement.clientWidth/oBoxW);
//設置mian的寬度，設置對齊方式

oParent.style.cssText='width:'+oBoxW*clos+'px;margin:0 auto';

var hArr=[];
for (var i=0 ;i<oBoxs.length;i++){
var hArr1=oBoxs[i].offsetHeight;
if(i<clos){
hArr[i] = hArr1;
?//hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr); ? ?
//math.min不能用于數(shù)組，所以要借助于apply方法：apply用來改變方法中this的指向
var index = getMinindex(hArr,minH);//獲取索引值 ?
console.log(index);
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxW*index+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}

}
console.log(hArr);
}
//根據(jù)class獲取元素
function getByClass(parent,classname){
var boxArr=new Array(),
oElements=parent.getElementsByTagName("*");
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==classname){
boxArr.push(oElements[i]);

}
}
return boxArr;
}
function getMinindex(arr,val){
?for(var i in val){
if(arr[i]==val){
return i;
}
?}
}