window.onload= function () {
??? waterfall('main','box');
??? var dataInt={'data':[{'src':'P_00.jpg'},{'src':'P_02.jpg'},{'src':'P_03.jpg'},{'src':'P_05.jpg'}]};
??? window.onscroll=function(){
??????? if(checkScrollSlide()){
??????????? //將數(shù)據(jù)塊渲染到頁面的尾部
??????????? 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('pic');
??????????????? 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);
??? //計算整個頁面顯示的列數(shù)（頁面寬/box寬）
??? var oBoxW=oBoxs[0].offsetWidth;
??? var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
??? //設(shè)置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';
??????????? hArr[index]+=oBoxs[i].offsetHeight;//改變高度數(shù)組的值
??????? }
??? }
??? console.log(hArr)

}
//根據(jù)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;
??????? }
??? }
}
//檢測是否具備了滾動條加載數(shù)據(jù)塊的條件
function checkScrollSlide(){
??? var oparent=document.getElementById('main');
??? var oBoxs=getByClass(oparent,'box');
??? var lastoBoxsH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
??? //頁面滾走的距離
??? var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
??? //瀏覽器窗口的可視區(qū)域高度
??? var height=document.body.clientHeight||document.documentElement.clientHeight;
??? return (lastoBoxsH<scrollTop+height)?true:false;
}