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()){
            //将数据块渲染到页面的尾部
            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);
    //计算整个页面显示的列数（页面宽/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=oBoxW*index+'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 lastoBoxsH=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 (lastoBoxsH<scrollTop+height)?true:false;
}