2回答

• 

  小小向日葵摩羯

  2016-12-25 07:08:48

  已解决，在

  window.onscroll=function(){
      if(checkScrollSlide()){

  这段语句中if里面的函数加个括号就可以了。

  0 0
• 

  小小向日葵摩羯

  2016-12-24 11:53:08

  js代码
  window.onload = function(){
      waterfall('main','box');
      var dataInt={"data":[{"src":'24.jpg'},{"src":'25.jpg'},{"src":'26.jpg'},{"src":'27.jpg'},{"src":'28.jpg'},{"src":'29.jpg'},{"src":'30.jpg'},{"src":'31.jpg'},{"src":'32.jpg'},{"src":'33.jpg'},{"src":'34.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;
      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;
          }
      }
  }
  
  //根据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;
  }
  
  //获取最小高度图片的index
  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;
  }

  
  

  0 0