1回答

• 

  jansanluan

  2017-08-24 23:50:21

  js里面的waterfall其实也可以不用放参数，你可以试一下。个人觉得放参数的目的是为了将这个函数传入不同的参数以便多次应用。但是本课中不放参数也没什么影响的地方。

  function waterfall(){
      var oParent = document.getElementById('container');
      var oBoxs = oParent.getElementsByClassName('box');
      //获取一行能放几张图片
      var boxWidth = oBoxs[0].offsetWidth;
      var cols = Math.floor(window.innerWidth/boxWidth);
      var oContainer = document.getElementById('container');
      oContainer.style.width=cols*boxWidth+'px';
      var oBoxH =[];
      for(var i=0;i<oBoxs.length;i++){
          if(i<cols){
              //定义一个数组用来保存每一行的高度
              oBoxH[i]= oBoxs[i].offsetHeight;
          }else{
              //找到oBoxH中高度最小的元素
              var minH = Math.min.apply(null,oBoxH);
              var index = getminHIndex(oBoxH,minH);
              oBoxs[i].style.position='absolute';
              oBoxs[i].style.left=index*boxWidth+'px';
              oBoxs[i].style.top = minH + oBoxs[index].offsetTop+'px';
              oBoxH[index]+=oBoxs[i].offsetHeight;
          }
      }
  }

  这个是jQuery的。

  function waterfall(){
      var $boxs = $('.box');
      var w = $boxs.eq(0).outerWidth();
      var cols = Math.floor($(window).width()/w);
      $('#container').css('width',cols*w);
      var hArr =[];
      $boxs.each(function(index,value){
          if(index<cols){
              hArr[index]=$boxs.eq(index).outerHeight();
  
          }else{
              var minH = Math.min.apply(null,hArr);
              var minHIndex = $.inArray(minH,hArr);
              $(value).css({
                  'position':'absolute',
                  'top':minH+'px',
                  'left':minHIndex*w+'px'
              });
              hArr[minHIndex]+=$(value).outerHeight();
          }
  
      })
  }

  刚学完瀑布流，新人勿喷。

  0 0