window.onload=function(){
????waterfall('main','box');
}
function?waterfall(parent,box){
????//獲取class為box的元素
????var?oParent?=?document.getElementById(parent);
????var?oBox=?getByClass(oParent,box);
????//console.log(oBox.length);
????//?計(jì)算頁面顯示的列數(shù)(頁面寬度/box寬)
????var?oBoxw?=?oBox[0].offsetWidth;
????var?cols?=Math.floor(document.documentElement.clientWidth/oBoxw);
????//設(shè)置main的寬度
????oParent.style.cssText='width:'+oBoxw*cols+'px;margin:0?auto';
????var?hArr=[];
????for(var?i=0;i<oBox.length;i++){
????????if(i<cols){
????????hArr.push(oBox[i].offsetHeight);
????????}
????}
????//console.log(hArr);
????var?minH=Math.min.apply(null,hArr);
????//console.log(minH);
????var?index?=?getMinH(hArr,minH);
????oBox[i].style.position='absolute';
????oBox[i].style.top=minH+'px';
????oBox[i].style.left=oBoxw*index+'px';
????hArr[index]+=oBox[i].offsetHeight;
}
//根據(jù)class獲取元素
function?getByClass(parent,clsName){
????var?boxArr?=?[];
????oElements?=?parent.getElementsByTagName('*');
????for(var?i=0;i<oElements.length;i++){
????????if(oElements[i].className==clsName){
????????????boxArr.push(oElements[i]);
????????}
????}
????return?boxArr;
}
function?getMinH(arr,val){
????for(var?i?in?arr){
????????if?(arr[i]==val){
????????????return?i;
????????}
????}
}
25行出現(xiàn)錯誤,是哪里出的問題?
2016-05-20
oBox[i]的i都沒了,for(var?i=0;i<oBox.length;i++){
????????if(i<cols){
????????hArr.push(oBox[i].offsetHeight);
????????}
????}
變量是在for循環(huán)內(nèi)定義的,你的i都跑變量外面來了,怎么會有,還有if?if(i<cols),下面的代碼不應(yīng)該是else里面嗎