window.onload?=?function(){
waterfull('main','box');
}
function?waterfull(parent,box){
var?oParent?=?document.getElementById(parent);
var?oBox?=?getByClass(oParent,box);
var?oBoxW?=?oBox[0].offsetWidth;
var?clos?=?Math.floor(document.?documentElement.clientWidth/oBoxW);
oParent.style.cssText?=?'width:'+oBoxW*clos+'px;margin:0?auto;';
var?hArr?=?[];//存放每列高度的數(shù)組
for?(var?i?=?0;?i?<?oBox.length;?i++)?{
if(i<clos){
hArr[i]?=?oBox[i].offsetWidth;//先把高度插進(jìn)數(shù)組?
}else{
var?minH?=?Math.min.apply(null,hArr);
var?index?=?getMinhIndex(hArr,minH);
oBox[i].style.postion?=?'absolute';
oBox[i].style.top?=?minH+'px';
//oBox[i].style.left?=?index*oBoxW+'px';
oBox[i].style.left?=?oBox[index].offsetLeft+'px';
hArr[index]+=oBox[i].offsetHeight;
}
}
}
function?getByClass(parent,className){
var?boxArr?=?[],//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
oElement?=?parent.getElementsByTagName('*');
for?(var?i?=?0;?i?<?oElement.length;?i++)?{
if(oElement[i].className?==?className){
boxArr.push(oElement[i]);
}
};
return?boxArr;
}
function?getMinhIndex(arr,val){
for(var?i?in?arr){
if(arr[i]?==?val){
return?i;
}
}
}
2016-07-17
function?getByClass(parent,className){
????var?boxArr?=?[],//用來(lái)存儲(chǔ)獲取到的所有class為box的元素
????oElement?=?parent.getElementsByTagName('*');
????for?(var?i?=?0;?i?<?oElement.length;?i++)?{
????????if(oElement[i].className?==?className){
????????????boxArr.push(oElement[i]);
????????}
????};
????return?boxArr;
}
上面第三行中加粗地方 ? 你的parent不能直接這么用,它實(shí)際上是一個(gè)id的值 ? ?應(yīng)該先獲取id為parent的dom元素進(jìn)行操作,
第三行代碼改為 ?oElement = document.getElementById("parent").getElementsByTagName("*");試試看是不是這個(gè)原因