window.onload=function(){

waterfall('main','box');

var dataInt={"data":[{'src':'P_00.jpg'},{'src':'P_01.jpg'},{'src':'P_02.jpg'},{'src':'P_03.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='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);

//計算整個頁面顯示的列數(頁面寬/box的寬)

var oBoxW=oBoxs[0].offsetWidth;

//寬度=圖片寬165+內邊距10*2+邊框寬度1*2+15

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=oBoxW*index+'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 lastBoxH=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.clientHeight||document.documentElement.clientHeight;

return (lastBoxH<scrollTop+height)?true:false;

}