window.onload=function(){
waterfall();
window.onscroll=function(){
var parent=document.getElementById("main");
var boxs=getByClass(parent,"box");
var scrollH=document.documentElement.scrollTop||document.body.scrollTop;
var documentH=scrollH+document.documentElement.clientHeight;
var lastH=boxs[boxs.length-1].offsetTop+Math.floor(boxs[boxs.length-1].offsetHeight/2);
/*763*/
if(lastH-350<documentH){ //这里的lastH不减掉350,就无法进入if语句???
/*465*/
dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"7.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
for(var i=0;i<dataInt.data.length;i++){
var divB=document.createElement("div");
divB.className="box";
parent.appendChild(divB);
var divP=document.createElement("div");
divP.className="pic";
divB.appendChild(divP);
myimg=document.createElement("img");
myimg.src="./images/"+dataInt.data[i].src;
divP.appendChild(myimg);
}
waterfall();
}
}
}
function waterfall(){
var oParent=document.getElementById("main");
var boxs=getByClass(oParent,"box");
var boxW=boxs[0].offsetWidth;
var num=Math.floor(document.documentElement.clientWidth/boxW);
oParent.style.cssText="width:"+boxW*num+"px;margin:0 auto;";
boxHarr=new Array();
for(var i=0;i<boxs.length;i++){
if(i<num){
boxHarr.push(boxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,boxHarr);
var minHindex=getminHindex(boxHarr,minH);
boxs[i].style.position="absolute";
boxs[i].style.top=minH+"px";
boxs[i].style.left=minHindex*boxW+"px";
//boxs[i].style.left=boxs[minHindex].offsetLeft+"px";
boxHarr[minHindex]=boxHarr[minHindex]+boxs[i].offsetHeight;
}
}
}
function getByClass(parent,clsName){
a=parent.getElementsByTagName('*');
var arr=[];
for(var i=0;i<a.length;i++){
if(a[i].className==clsName){
arr.push(a[i]);
}
}
return arr;
}
function getminHindex(arr,minH){
for(var i in arr){
if(arr[i]==minH)
return i;
}
}
用这个试试:
boxHarr[minHindex]=boxHarr[minHindex]+boxs[i].scrollTop;
有没有给包裹的父元素家相对定位啊