根据拖动滚动条加载数据；

window.onload=function(){
waterfall('main','box');
//模拟 从数据库拿到的数据
var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"}，{"src":"3.jpg"}，{"src":"4.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 checkScrollSlide(){
    var oParent = document.getElementById('main');
    var oBoxs=getByClass(oParent,'box');//返回所有父元素标签类名为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;
}