jqurey封装瀑布流 waterFall.js

公司项目用JQuery 比较多，然后我算是新手，最近在学简单的封装。

$.fn.waterFall 定义这个方法。$,extend()用来拓展。

js 代码：

// 1、编写插件开发基本方法
;
(function ($) {
  $.fn.waterFall = function () {
    // 2、声明一个对象，用来给每个图片盒子设置属性
    var defaults = {
      gap: 15,
    };
    // 3、通过$.extend()进行拓展
    defaults = $.extend(defaults);
    // 4、找到每个图片盒子元素;
    var $this = $(this); // items 元素
    var item = $this.children();
    // 5、算出瀑布流的列数（每一行能放几张图片）
    var itemWidth = item.width();
    var itemHeight = 0;
    var column = Math.floor($(this).width() / itemWidth);
    var arrHeight = []; // 保存每一列的高度值,数组的长度为总的列数
    // 6、遍历每个图片盒子，对其设置定位的top值和left值
      // 7、寻找一行中，高度最小那一列的位置，以及这一列的高度值
    item.each(function (index, element) {
      // 7.1 获取每个的高度
      itemHeight = $(element).height();
      // 6.1 先确定第一行的图片盒子排列
      if (index < column) {
        $(element).css({
          top: 0,
          left: (itemWidth + defaults.gap) * index
        });
         // 7.2 把第一行中的每个图片盒子的高度，保存到数组中去
        arrHeight[index] = itemHeight;
      } else {
        // 代表其它行
        // 7.3 计算数组中最小值以及对应的索引值
        function getMin(arr) {
          var min = {};
          min.index = 0;
          min.value = arr[min.index];
          for(var i = 0; i < arr.length; i++) {
            if(arr[i] < min.value){
              min.value = arr[i];
              min.index = i;
            }
          }
          return min;
        }
        var min_value = getMin(arrHeight).value;
        var min_index = getMin(arrHeight).index;
        // 7.4 设置下一行的top值和left值
        $(element).css({
          top: min_value + defaults.gap,
          left: (itemWidth + defaults.gap) * min_index
        });
        // 7.5 更新最小列的值
        arrHeight[min_index] += itemHeight +defaults.gap;
      }

    });

    // 8、获取最大列的高度(把最大列高度值赋值给父容器：items)
    function getMax (arr) {
      var max = {};
      max.index = 0;
      max.value = arr[max.index];
      for(var i = 0; i  max.value){
          max.value = arr[i];
          max.index = i;
        }
      }
      return max;
    }
    var  max_value = getMax(arrHeight).value;

    $this.height(max_value);
  }
})(jQuery);

引用：

html部分：

    

      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
      

        
        
土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基
        

          
          

            筱竹的头像
            
小清晰
          
        
      
    
    
1212