window.onunload=function(){
????waterfall('main','box')
};
function?waterfall(parent,box){
????//將main下的所有class為box的元素取出來(lái);
????var?oParent=document.getElementById(parent);
????var?oBoxs=getByClass(oParent,box);
????//console.log(oBoxs.length);
????//計(jì)算整個(gè)頁(yè)面顯示的列數(shù)(頁(yè)面款/box的寬)
????var?oBoxW=oBoxs[0].offsetWidth;
????//console.log(oBoxW);
????var?cols=Math.floor(document.documentElement.clientWidth/oBoxW);
????//console.log(cols);
????//設(shè)置main的寬度
???oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto';
???//?oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto';
????var?hArr=[];
????for(var?i=0;i<oBoxs.length;i++){
????????if(i<cols){
????????????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);



}

//根據(jù)class獲取元素
function?getByClass(parent,clsName){
????var?boxArr=new?Array(),//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
????????oElements=parent.getElementsByTagName('*');
????for(var?i=0;i<oElements.length;i++){
????????if(oElements[i].className==clsName){
????????????boxArr.push(oElements[i]);
????????}
????}
????return?boxArr;
}

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

我想問(wèn)下 ?為啥我的無(wú)法顯示像老師這樣 ? 從設(shè)置margin:0 auto;開(kāi)始就不行了 ? 我直接照抄代碼還是不行 為啥??？