给main设置了1000px的宽,按照一行4列来排列,貌似index值没有取上,所有图片跑到第一张下面去了,应该是在第4张下面的
window.onload = function(){
waterfall("main", "box");
}
//通过waterfall函数将存放每张图片的盒子取出来
function waterfall(parent, box){
var oParent = document.getElementById("main");
var oBoxs = getClassBox(oParent,box);
var pageW = oParent.offsetWidth;
var oBoxW = oBoxs[0].offsetWidth;
var cols = pageW / oBoxW;
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 = getminhIndex(hArr,minH);
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = minH+"px";
oBoxs[i].style.left = oBoxW*index+"px";
}
}
}
function getClassBox(parent, clsName){
var boxArr = []; // 创建数组boxArr用来存储取出来的box
var oElements = parent.getElementsByTagName("*"); //创建变量oElements用来获取main下的box集合
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 val){
if(arr[i]==val){
return i;
}
}
}
"for(var i in val)" i应该在arr中,写错了,已解决?