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