// 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;}