自己封装jquery瀑布流插件

[1] 首先jQuery中封装插件的方法有两个:

(1) jquery.fn.extend(object)

(2)jquery.extend(object)

这里我们采用第一种方法优点是可以利用获取对象进行调用

注意：我们的插件遵循一般的jq插件的命名规范，jquery.插件名.js =>  jquery.waterfall.js

[2]理解瀑布流是什么：

顾名思义，瀑布流的内容就好像瀑布一样倾泻而下从上到下进行排布

[example]:

【瀑布流的核心就是】

[1]宽度一致，高度参差不齐

[2]新增行的内容，优先添加到“最矮”的下方

[难点]

当我们到达新的一行时候，如何获取上一行高度最小的行高

[解决]

可以定义一个数组专门放置高度，新增了以后替换掉数组中的原始高度即可

---

 

所谓瀑布流就是一种布局方式，items中的item宽度一样，高度层次错落，我们称为瀑布流：（思想见下图）

用户自己书写浏览器端和服务器的代码，只需要利用$()获取事件源对象调用我们书写的瀑布流插件进行布局就可以实现ajax的瀑布流效果了

[3]瀑布流思想及代码：

条件：

这里我们书写瀑布流插件分为三个步骤：

[步骤1]：

为了计算 获取一些必须知道的值：

容器的宽度，子元素的宽度，每一行放置的元素的个数，以及每个元素之间的间距

//把this 定义$_this变量 方便观察
        var $_this = this;
        //父盒子宽度
        var totalWidth = $_this.width();
        //子盒子宽度
        var itemWidth  = $_this.children('.item').width();
        //每一行的个数 4.1 4.9
        var colNum = Math.floor(totalWidth/itemWidth);
        //间距(总宽度-个数*子元素宽度)/(个数-1)
        var margin  = (totalWidth-(itemWidth*colNum))/(colNum-1);

[步骤2]：

获取了上述的数据之后我们开始最重要的步骤二

我们需要计算每一个元素的top还有left值（对父盒子进行相对定位，子盒子进行绝对定位实现高度参差不齐的效果）

1 准备一个数组  数组的元素的个数 跟每一行的个数一直里面是默认值（比如我这里的10或者margin（反正随意给个默认值啦当然没有默认值也不碍事））

2  循环我们所有的item元素

　　获取子元素的高度

　　通过我们在步骤1中定义的数组来获取最小的值

 3  修改我们在步骤1中定义的数组对应的索引值即可

//步骤2.1  准备高度数组
        //高度数组
        var heightArr = [];
        //循环为高度数组 赋值初始值
        for(var i = 0;i<colNum;i++) {
            heightArr[i] = margin;
            //给margin是为了看起来好看一点
        }

        //步骤2.2循环子元素 获取数组中最小的索引  修改当前循环的元素的top 和 left值
        //jq中循环数组的方法
        $_this.children('item').each(function () {
            //获取当前循环的子元素的高度
            var currentHeight = $(element).height();
            //计算该元素放在哪个位置
            //先假设索引为0的是最小值
            var minindex = 0;
            var minHeight = heightArr[0];
            for(var i = 0;i<heightArr.length;i++) {
                //跟我们假设的最小值进行比较
                if(heightArr[i]<minHeight) {
                    //替换一下
                    minHeight = heightArr[i];
                    minindex = i;
                }
            }
            //循环完毕最小的高度以及最小的索引值

            //设置给当前循环的子元素即可
            //top高度为计算出来的最小高度
            //left左间距为宽度 * 索引 +宽度 * 间距
            $(element).css({
                top:minHeight,
                left:minindex*(itemWidth+margin)
            })

            //步骤2.3 修改步骤1中创建的高度数组
            //修改minindex对应的值即可
            minHeight+=currentHeight;//加上自己的高度
            minHeight+=margin;//为了美观 把间距加上去
            heightArr[minindex] = minHeight;
        })

[步骤3]修改父盒子的高度对父盒子的siblings影响降到最低

/*
            //修改父盒子的高度即可
            //获取高度数组中最大的值
            //修改父盒子的高度为计算出来的最大的值
        */
        var maxHeight = heightArr[0];
        for(var i = 0;i<heightArr.length;i++) {
            if(heightArr[i]>maxHeight) {
                maxHeight = heightArr[i];
            }
        }
        //循环完毕之后  最大值就有了
        $_this.height(maxHeight);

[插件代码]

$.fn.extend({
    waterfall:function(){
        // console.log('我自己写的瀑布流插件');

        // 步骤1
        /*
            为了 计算 获取一些 必须知道的值
            容器的宽度 .items的 宽度
            子元素的宽度 .child().width()
            每一行放置的元素个数
            计算间距
        */
        //把this 定义$_this变量 方便观察
        var $_this = this;
        //父盒子宽度
        var totalWidth = $_this.width();
        //子盒子宽度
        var itemWidth  = $_this.children('.item').width();
        //每一行的个数 4.1 4.9
        var colNum = Math.floor(totalWidth/itemWidth);
        //间距(总宽度-个数*子元素宽度)/(个数-1)
        var margin  = (totalWidth-(itemWidth*colNum))/(colNum-1);

        //步骤2
        /*
          计算每一个元素的top还有left的值
          1  准备一个数组 数组的元素的个数 跟每一行的个数一直里面是默认值（比如是10或者是margin）
          2  循环我们的所有item元素
                  获取子元素的高度
                  通过我们在步骤1中定义的数组获取最小的值
                  根据获取的最小的索引值计算left 和 top
          3  修改我们在步骤一中定义的数组对应索引的值即可
         */

        //步骤2.1  准备高度数组
        //高度数组
        var heightArr = [];
        //循环为高度数组 赋值初始值
        for(var i = 0;i<colNum;i++) {
            heightArr[i] = margin;
            //给margin是为了看起来好看一点
        }

        //步骤2.2循环子元素 获取数组中最小的索引  修改当前循环的元素的top 和 left值
        //jq中循环数组的方法
        $_this.children('item').each(function () {
            //获取当前循环的子元素的高度
            var currentHeight = $(element).height();
            //计算该元素放在哪个位置
            //先假设索引为0的是最小值
            var minindex = 0;
            var minHeight = heightArr[0];
            for(var i = 0;i<heightArr.length;i++) {
                //跟我们假设的最小值进行比较
                if(heightArr[i]<minHeight) {
                    //替换一下
                    minHeight = heightArr[i];
                    minindex = i;
                }
            }
            //循环完毕最小的高度以及最小的索引值

            //设置给当前循环的子元素即可
            //top高度为计算出来的最小高度
            //left左间距为宽度 * 索引 +宽度 * 间距
            $(element).css({
                top:minHeight,
                left:minindex*(itemWidth+margin)
            })

            //步骤2.3 修改步骤1中创建的高度数组
            //修改minindex对应的值即可
            minHeight+=currentHeight;//加上自己的高度
            minHeight+=margin;//为了美观 把间距加上去
            heightArr[minindex] = minHeight;
        })

        //步骤3
        /*
            //修改父盒子的高度即可
            //获取高度数组中最大的值
            //修改父盒子的高度为计算出来的最大的值
        */
        var maxHeight = heightArr[0];
        for(var i = 0;i<heightArr.length;i++) {
            if(heightArr[i]>maxHeight) {
                maxHeight = heightArr[i];
            }
        }
        //循环完毕之后  最大值就有了
        $_this.height(maxHeight);

    }
})