jquery实现可轮播的瀑布流效果

案例效果：

主要思路：

先实现瀑布流，然后再实现向上无缝轮播。

其中瀑布流实现步骤如下：
1、确定图片的宽度 - 滚动条宽度
2、用相对定位来确定第一行按序布局
3、用数组来放各列累加的高度，以相对定位来确定其他行的布局。其中top值就是最小列的高度加上间距。

向上无缝轮播主要是利用margin-top的递减来实现向上滚动。当滚动完后再赋值为0重新滚动。

js：

(function ($) {
    var moveFun = function (poster, num, show) {
      var _this = this;
      this.num = num || 1;
      this.show = show || 1;
      this.poster = poster;
      this.dir = 'up';
      this.posterul = this.poster.find('ul');
      this.items = this.posterul.find('li');
      this.clones = this.items.clone();
      this.sigleheight = this.items.eq(0).height();
      this.itemlen = this.items.length;
  
        //实现瀑布流
      this.waterFall();
      var last1 = _this.items.last().position().top + _this.items.last().height() + 25
      var last2 = _this.items.eq(-2).position().top + _this.items.eq(-2).height() + 25
      var last3 = _this.items.eq(-3).position().top + _this.items.eq(-3).height() + 25
      var last4 = _this.items.eq(-4).position().top + _this.items.eq(-4).height() + 25
      var arrayL = [last1,last2,last3,last4] 
      
      

  
      this.totalheight = Math.min.apply(null, arrayL)
  
      
      this.margintop = parseInt(this.posterul.css('margin-top'));
      if (this.show >= this.itemlen) { return false; }
      _this.setDefault();
      this.setAnimate();
      this.poster.hover(function () {
          clearInterval(_this.timer)
      }, function () {
          _this.setAnimate();
      })
  };
  
  moveFun.prototype = {
      setDefault: function () {
          this.posterul.append(this.clones);
          this.posterul.append(this.clones);
          this.posterul.css({ 'margin-top': 0 })
      },
      setAnimate: function () {
          var _self = this;
          _self.timer = setInterval(function () {
              _self.margintop -= 1;
              _self.posterul.animate({ 'margin-top': _self.margintop + 'px' }, 0, function () {
                  if (-_self.margintop >= _self.totalheight) {
                      _self.posterul.css({ 'margin-top': this.totalheight });
                      _self.margintop = 0;
                  }
              })
          }, 34)
      },
      waterFall:function(){
          // 1 确定图片的宽度 - 滚动条宽度
        var columns = 3; //3列
        var pageWidth = $('.waterfull-box').width()-columns*20;
        var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
        $(".item").width(itemWidth); //设置到item的宽度
        var arr = [];
        $(".waterfull-box .item").each(function(i){
            var height = $(this).height();
            if (i < columns) {
                // 2 第一行按序布局
                $(this).css({
                    top:0,
                    left:(itemWidth) * i+20*i,
                });
                //将行高push到数组
                arr.push(height);
            } else {
                // 其他行
                // 3 找到数组中最小高度  和 它的索引
                var minHeight = arr[0];
                var index = 0;
                for (var j = 0; j < arr.length; j++) {
                    if (minHeight > arr[j]) {
                        minHeight = arr[j];
                        index = j;
                    }
                }
                // 4 设置下一行的第一个盒子位置
                // top值就是最小列的高度
                $(this).css({
                    top:arr[index]+30,//设置30的距离
                    left:$(".waterfull-box .item").eq(index).css("left")
                });
  
                    // 5 修改最小列的高度
                    // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
                    arr[index] = arr[index] + height+30;//设置30的距离
                }
            });
      }
  };
  moveFun.init = function (poster, num, show) {
      var _this = this;
      new _this(poster, num, show);
  };
  window['moveFun'] = moveFun;
  
  
  })(jQuery);    

 moveFun.init($(".move-box"));

html:

 <div class="move-box">
     <ul class="waterfull-box">
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 200px;"></li>
         <li class="item" style="height: 150px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 120px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 200px;"></li>
         <li class="item" style="height: 150px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 120px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 200px;"></li>
         <li class="item" style="height: 150px;"></li>
         <li class="item" style="height: 100px;"></li>
         <li class="item" style="height: 120px;"></li>
     </ul>
 </div>   

css:

*{margin: 0;padding: 0;}
.move-box{width: 1000px;height: 600px;border: 2px solid green;border-radius: 10px;overflow: hidden;}
.waterfull-box{position: relative;list-style: none;width: 1000px;}
.item{border-radius: 15px;position: absolute;background: red;margin: 10px;}