/**
?*?Created?by?Administrator?on?2017/7/12.
?*/
window.onload=function(){
??????waterfall('main','box');
};
function?waterfall(parent,box)?{
????//取出main下的所有class為box的元素
????var?oParent?=?document.getElementById(parent);
????var?oBoxs?=?getByClass(oParent,?box);
????//console.log(oBoxs);
????//計算列數
????var?oBoxW?=?oBoxs[0].offsetWidth;
????var?cols?=?Math.floor(document.documentElement.clientWidth?/?oBoxW);
????//設置main的寬度
?????oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto';
???//?oParent.style.width?=?oBoxW?*?cols?+?"px";
????//oParent.style.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);
????????????var?index=getMinIndex(hArr,minH);
????????????oBoxs[i].style.position="absolute";
????????????oBoxs[i].style.top=minH+"px";
????????????oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
????????????hArr[index]+=oBoxs[i].offsetHeight;
????????}
????}
}
//找到所有class是box的元素
function?getByClass(parent,clsName){
????var?boxArr=[];//獲取取得的box元素數組
????var?oElements=parent.getElementsByTagName("*");//取父元素下的所有內容
????//對獲取的元素進行遍歷，找到傳入的clsName
????for(var?i=0;i<oElements.length;i++)?{
????????if?(oElements[i].className?==?clsName)?{
????????????boxArr[i].push(oElements[i]);
????????}
????}
????return?boxArr;
}
//獲取當前最低高度的索引值
function?getMinIndex(arr,val){
//????for(var?i?in?arr){
//????????if(arr[i]==val){
//????????????return?i;
//????????}
//????}
????for(var?i=0;i<arr.length;i++){
????????if(arr[i]==val){
????????????return?i;
????????}
????}
}Uncaught TypeError: Cannot read property 'push' of undefined? ? at getByClass (waterFallJSEX.js:46)? ? at waterfall (waterFallJSEX.js:12)? ? at window.onload (waterFallJSEX.js:6)
錯的有點莫名其妙
寒熙
2017-07-12 17:49:24
