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; } }
减掉350或者其它数值以后,可以完全正常运行,但是用原值就无法进入IF语句?
问题错了,应该是offsetTop无法满足条件,还有,同样想问为什么页面收窄以后再放大,第一排的图片就无法完全显示了?看过一些解答,还是不太懂。