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 = [];//存放每列高度的数组 for (var i = 0; i < oBox.length; i++) { if(i<clos){ hArr[i] = oBox[i].offsetWidth;//先把高度插进数组 }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 = [],//用来存储获取到的所有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; } } }
function getByClass(parent,className){
var boxArr = [],//用来存储获取到的所有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不能直接这么用,它实际上是一个id的值 应该先获取id为parent的dom元素进行操作,
第三行代码改为 oElement = document.getElementById("parent").getElementsByTagName("*");试试看是不是这个原因