// JavaScript Documentwindow.onload=function(){ waterfall("main","box"); var dataInt={"data":[{"src":"31.jpg"},{"src":"32.jpg"}]} window.onscroll=function(){ if(checkscrollslide){ var oParent=document.getElementById("main"); //将数据快渲染到当前页面的尾部 for(var i=0;i<dataInt.length;i++){ var oBox=document.createElement("div"); oBox.className="box"; oParent.appendChild(oBox); var oPic=document.createElement("div"); oPic.className="pic"; oBox.appendChild(oPic); var oImg=document.createElement("img"); oImg.src="images/"+dataInt.data[i].src; opic.appendChild(oImg); } waterfall("main","box"); } }} function waterfall(parent,box){ //将所以main下class为box的元素取出 var oparent=document.getElementById(parent); var oBoxs=getByClass(oparent,box); //计算整个页面的列数 var oBoxW=oBoxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/oBoxW); //设置main的宽 oparent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto"; 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=oBoxs[index].offsetLeft+"px"; hArr[index]+=oBoxs[i].offsetHeight; } } console.log(hArr); } //根据class获取元素function getByClass(parent,clsName){ var boxArr=new Array(),//储存所有class为box的元素 oElements=parent.getElementsByTagName("*"); 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 arr){ if(arr[i]==val){ return i; } }} //检测是否具备了滚条加载数据块的条件function checkscrollslide(){ var oParent=document.getElementById("main"); var oBoxs=getByClass(oParent,"box"); var lastoBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); var scrollTop=document.body.scrollTop||document.documentElement.scrollTop; var height=document.body.scrollHeight||document.documentElement.scrollTop; return(lastBoxH<scrollTop+height)?true:false;}
添加回答
举报
0/150
提交
取消