// JavaScript Document
window.onload=function(){
    waterfall('main','box');
    //假设这是后台给的数据块
    var dataint={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.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(partent,box){
    //将main下面所有class为box的元素取出来
    var oparent=document.getElementById(parent);
    var boxs=getByClass(oparent,box);
    //计算整个页面显示的列数（页面宽度/box的宽度）
    var boxwidth=boxs[0].offsetWidth;
    var cols=Math.floor(document.documentElement.clientWidth/boxwidth);
    //设置main的宽度
    oparent.style.cssText='width:'+boxwidth*cols+'px;margin:0 auto;';
    var heightarr=[];
    for(var i=0; i<boxs.length; i++){
        if(i<cols){
            heightarr.push(boxs[i].offsetHeight);
            }else{
                var minh=Math.min.apply(null,heightarr);
                var index=getminhindex(heightarr,minh);
                boxs[i].style.position='absolute';
                boxs[i].style.top=minh+'px';
                boxs[i].style.left=boxwidth*index+'px';
                heightarr[index]=minh+boxs[i].offsetHeight;
            }
        }
    }
    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);
        //获取滚动条滚动高度，在混杂模式下用body，在标准模式下documentElement
        var scrolltoph=document.body.scrollTop || document.documentElement.scrollTop;
        //接下来获取浏览器窗口高度
        var height=document.body.clientHeight || document.documentElement.clientHeight;
        return (lastboxh<height+scrolltoph)?true:false;
        }