window.onload=function(){ waterfall('main','box'); var dataInt ={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}]} window.onscroll=function(){ if (checkScrollslide) { var oParent=document.getElementById('main'); //将数据款渲染到页面的尾部 for (var i=0;i<dataInt.data,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="img/"+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); console.log(cols); //设置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=oBoxW*index+'px'; oBoxs[i].style.left=oBoxs[index].offsetLeft+'px'; hArr[index]+=oBoxs[i].offsetHeight; } } } //根据class获取元素 function getByClass(parent,clsName){ var boxArr=new Array(),//用来存储所有class为box的元素 oElement=parent.getElementsByTagName('*'); for (var i=0;i<oElement.length;i++) { if(oElement[i].className ==clsName){ boxArr.push(oElement[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 lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2); var scrollTop=document.body.scrollTop || document.documentElement.scrollTop; var heught=document.body.clientHeight || document.documentElement.clientHeight; return (lastBoxH<scrollTop+heught)?true:false; }
//将数据款渲染到页面的尾部
for (var i=0;i<dataInt.data,length;i++)
这里dataInt.date.length中length前面是.你写成逗号了。
加载是通过后台加载的,在这里我们已经把box的个数写死了。所以看不到效果,我是这样理解的。
额 我也弄不出来