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 <arr.length; i++) { if(arr[i] > max.value){ max.value = arr[i]; max.index = i; } } return max; } var max_value = getMax(arrHeight).value; $this.height(max_value); } })(jQuery);

引用：

<script src="./js/waterFall.js"></script> <script> window.onload = function(){ $(".items").waterFall(); } </script>

html部分：

<div class="container"> <div class="items"> <div class="item"> <img src="./imgs/001.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user001.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/002.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user002.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/003.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user003.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/004.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user004.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/005.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user005.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/006.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user001.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/007.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user002.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/008.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user003.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/009.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user004.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> <div class="item"> <img src="./imgs/010.jpeg" alt=""> <p>土地是以它的肥沃和收获而被估价的；才能也是土地，不过它生产的不是粮食，而是真理。如果只能滋生瞑想和幻想的话，即使再大的才能也只是砂地或盐池，那上面连小草也长不出来的。 —— 别林斯基</p> <div class="avater"> <img src="./imgs/avater/user005.png" alt=""> <div class="avaterBottom"> <span>筱竹的头像</span> <p><span>小清晰</span></p> </div> </div> </div> </div> <div>1212</div> </div>