<script type="text/javascript">
?

? window.onload = function(){
? ? ?waterfall("box");
? }

? function waterfall(cls){
? ? ?//獲取每個條目
? ? ?var main = document.getElementById("main");
? ? ?var boxs = main.getElementsByClassName(cls);

? ? ?//計算頁面現實的列數
? ? ?var boxw = boxs[0].offsetWidth;
? ? ?var clos = Math.floor(document.documentElement.clientWidth/boxw);

? ? ?//設置main的寬度并居中
? ? ?main.style.cssText = "width:"+clos*boxw+"px;margin:0 auto;";
// ? ?console.log(boxw);
// ? ?console.log(clos);

? ? ?//將第一行元素高度存放于數組中
? ? ?//獲取最小高度，將第二航元素放置于此元素下
? ? ?var hArr = [];
? ? ?for(var i=0;i<boxs.length;i++){
? ? ? ? ? ?var height = boxs[i].offsetHeight;
? ? ? ? if(i<clos){
? ? ? ? ? ?hArr.push(height);
? ? ? ? }else{
? ? ? ? ? ?var minH = Math.min.apply(null,hArr);
? ? ? ? ? ?//遍歷數組獲取最小值索引，根據索引獲取最小高度元素,將原來索引中的值更新為現有值加上第
? ? ? ? ? ?var index = hArr.indexOf(minH);
? ? ? ? ? ?var obj = boxs[index];
? ? ? ? ? ?var left = obj.offsetLeft;
? ? ? ? ? ?var height1 = obj.offsetHeight;
? ? ? ? ? ?boxs[i].style.position="absolute";
? ? ? ? ? ?boxs[i].style.top=minH+"px";
? ? ? ? ? ?boxs[i].style.left=left+"px";
// ? ? ? ? ?boxs[i].style.cssText="position:absolute;top:"+minH+"px;left:"+left+"px;";
? ? ? ? ? ?hArr[index]+=height1;
? ? ? ? ? ?console.log(hArr[index]);
? ? ? ? }
? ? ?}

? ? ?console.log(hArr);
? }
</script>