个回答

• ke柯

  2017-05-18 12:08:00

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

  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;
  }

  
  

  0