一、jQuery插件机制

用于扩展jquery元素集来提供新的方法（通常用来制作插件）

jQuery定义了两个方法用来自定义插件

1、 jQuery.fn.extend(object) / $.fn.extend(object)

注册完毕以后，使用$(“选择器”).func使用，object：用来扩充jquery对象

例如：

//1. $.fn.extend();  利用$("选择器") 调用
$.fn.extend({
    becomeBig: function(){
        //在这里的this是jquery元素
        this.css({"fontSize":"50px"});
        return this;
   }
});

2、jQuery.extend(object) / $.extend(object)

注册完毕以后，使用$.func 使用，object：用来扩充jquery对象

// 2. $.extend();     利用$调用
$.extend({
    becomeBig: function (){
    console.log("我是用$.extend()方法写的jquery插件---becomeBig.js");
    }
});

3. 注意：

为了便于使用插件，能够清楚的知道该插件的作用，建议将自定义插件命名为：
格式如下：

jquery.fn.函数名.js
jquery.函数名.js

二、瀑布流布局插件写法

瀑布流布局可用于异步交互获取数据所展示的页面上。每个元素的宽度都是相同的，而高度不等。给人一种错落的感觉。（堆糖网首页采用的就是瀑布流布局）

瀑布流布局如下图所示：
这里写图片描述

1、在html文件中引入jquery.js文件及瀑布流插件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.fn.waterfall.js"></script>

2、书写瀑布流插件代码

思路：
1. 利用绝对定位，计算出每个盒子的top值和left值
2. 找出每列的最短垂直距离，得到对应列的索引值，将下一个子元素放置在该列下，然后计算出该列的高度，赋给top
3. 由于宽度是一样的，因此left值，就用所在列索引值*（宽度+间距），得到对应的left值
4. 重复第二点，将所有元素都放置进去
这里写图片描述
- 获取父盒子的总宽度，子盒子的宽度，用于计算一行中放置几个元素，并计算间距值

//获取父盒子的宽度，获取子盒子的宽度
var faWidth = $_this.width();
var sonWidth = $_this.children('.item').width();
//计算每行放置几个子盒子(列数不能含小数，采取向下取整)
var column = Math.floor(faWidth/sonWidth);
//计算盒子之间的间距----n个盒子，需要n-1个间距
var autoMargin = (faWidth-sonWidth*column)/(column-1);

定义一个数组，用来装每列的高度值，在数组中找出值最小的那个，用来放置下一个盒子

var columnHeight = [];//用来装每行的高度值的数组
for(var a=0;a<column;a++) {
    //给每个元素默认的间距
    columnHeight[a] = autoMargin;
}

循环每个元素，判断该元素放置的位置，确定好位置后再确定top值和left值，即可。

$_this.children(".item").each(function(index, ele) {
   //先设index=0的间距是最小的
   var minHeightIndex = 0;
   var maxHeightIndex = 0;
   var minHeight = columnHeight[0];
   //获取当前元素的高度
   var currentHeight = $(this).height();
   //每次要先判断最小的高度，得到它的索引值
   for(var j=0;j<columnHeight.length;j++) {
       if(minHeight>columnHeight[j]) {
           minHeightIndex = j;
           minHeight = columnHeight[j];
       }
   }
    //给该元素的top值和left值
    $(this).css({
       "top":minHeight,
       "left":minHeightIndex*sonWidth+minHeightIndex*autoMargin
    });
    //每列所占高度更新,不仅要加高度，还要加margin，美观
     minHeight += currentHeight;
     minHeight += autoMargin;
     columnHeight[minHeightIndex] = minHeight;
     //比较每列的最高的高度赋值给父盒子
      for(var j=0;j<columnHeight.length;j++) {
          if(columnHeight[maxHeightIndex]<columnHeight[j]) {
              maxHeightIndex = j;
          }
      }
       $_this.height(columnHeight[maxHeightIndex]);
   });
}

注意点：（可能会出现的bug）

bug：

由于图片的加载速度过慢，当图片还未加载出来，而脚本可能已经执行完毕，则会出现盒子层叠现象。
如：
这里写图片描述

解决办法：

为了避免这种事情的发生，建议先给图片加高度，可免于出现盒子层叠现象。

jQuery插件机制以及瀑布流布局插件写法