console.log(clos)輸出列數(shù)為7，瀏覽器顯示為6列，且前第七個(gè)和第八個(gè)圖片（第二列的一和二）沒有內(nèi)邊距
// JavaScript Document
window.onload=function(){
waterfall("main","box");
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
getByClass(oParent,box);
var oBoxs=getByClass(oParent,box);
var aBoxW=oBoxs[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/aBoxW);
oParent.style.cssText='width:'+aBoxW*cols+'px;margin:auto';
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols-1){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr);
var index=getMinHIndex(hArr,minH);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+'px';
//oBoxs[i].style.left=aBoxW*index+'px';
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
console.log(cols);
console.log(hArr);
}
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 getMinHIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
2018-07-30
這個(gè)問題我也遇到了，我研究了一下午。是offsetWidth的問題。我console獲取到值為201,但是實(shí)際盒子寬度為202，故第一行最后一張圖，超邊。
解決方案：
修改前：oParent.style.cssText='width:'+aBoxW*cols+'px;margin:auto';
修改后：oParent.style.cssText='width:'+202*cols+'px;margin:auto';
正確顯示，不謝！
2018-03-30
cols不用減一吧。在判斷的時(shí)候：
if(i<cols-1){
hArr.push(oBoxs[i].offsetHeight);
}else{