本身封裝的瀑布流插件，含最詳細註釋，簡單易懂。

基於jquery的插件fn至關於prototype,下面開始封裝。

$.fn.waterFall=function (option) {   //option  用戶傳過來的{gap:15}

    var defaults = {gap:20} //默認值

    defaults = $.extend(defaults,option);  //若是用戶傳參數，以用戶爲準合併

    var _this = $(this); //_this就是最父級，裝載圖片和文字的盒子

    var allItem = _this.children('.item');  //獲取父級下每個的 元素

    var itemWidth = allItem.width(); //獲取每個item的寬度

    var count = Math.floor(_this.width()/(itemWidth+defaults.gap)); //向下取整，算出每一行最多可放的列數

    var arr = []; //建立一個空數組，方便存儲每一列的高度

    allItem.each(function (index,ele) {  //遍歷每個item
        if(index<count){  //若是不夠佔滿一列
            $(ele).css({  //遍歷全部的元素 給每一圖片設置座標值
                top:0,
                left:(itemWidth+defaults.gap)*index+'px'  //全部元素的left座標 left= (item的寬度+defaults.gap)* index （列數-1）
            })
            arr[index] = $(ele).height()
        }else {  //若是有多行
            // 第二行如下 添加的規律：找出高度最小的列，往這個後面追加圖片
            var minHeight = arr[0]; //最小值
            var minkey = 0;  //記錄最小的高度所在的列數
            var i =0,l=arr.length;
            for(;i<l;i++){
                if(minHeight>arr[i]){
                    minHeight=arr[i];
                    minkey = i
                }
            }

            var height = $(ele).height()
            $(ele).css({
                'top':minHeight+defaults.gap+'px',
                'left':minkey*(itemWidth+defaults.gap)+'px' //從第二行開始最小的高度
            })

            //動態更新最小列的高度
            arr[minkey]+=height+defaults.gap
        }
    })

    //算出全部列的高度，給外層父元素加上。

    var maxHeight = arr[0];

    for(var i =0;i<arr.length;i++){
        if(maxHeight<arr[i]){
            maxHeight=arr[i]
        }
    }

    _this.height(maxHeight)
}

下面調用演示:

dom模板：

<div class="wrapper">
      <div class="items">
         <!-- 此處請多個item -->
          <div class="item">
              <img src="./images/1.jpg" alt="">
              <p>花非花，霧非霧，夜半來，天明去，來如春夢很少時。</p>
          </div>
      </div>
  </div>

js部分：

$('.items').waterFall({gap:15});