瀑布流

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

    // 步骤1
    /*
        为了 计算 获取一些 必须知道的值
        容器的宽度 .items的 宽度
        子元素的宽度 .child().width()
        每一行放置的元素个数
        计算间距
    */
    // 定义$_变量 方便 观察
    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
    /*    1. 准备一个 数组 数组元素的个数 跟 每一行的个数一直
            里面是默认值(比如是10 或者是margin)
        2. 循环我们的 所有 .item 子元素
            获取子元素的高度
            通过我们在步骤1中定义的 数组 获取 最小的值
            根据获取的 最小索引值 计算top 以及left
        3.修改步骤1中定义的 数组 对应索引的值 即可
    */

    // 步骤2.1 准备高度数组
    // 高度数组
    var heightArr = [];

    // 循环为 高度数组 赋值 初始值
    for (var i = 0; i < colNum; i++) {
        heightArr[i] = margin;
    }


    // 步骤 2.2 循环子元素 获取数组中最小的索引
        // 修改当前循环的元素的 top 以及 left值

    // jq中 循环数组的方法
    $_this.children('.item').each(function(index, element) {
        // console.log(index+'||'+element);

        // 获取 当前循环的 子元素高度
        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+minIndex*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);
}

})