自己封裝的瀑布流外掛，含最詳細註釋，簡單易懂。

ivyzhang發表於2018-02-19
封裝

基於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});

相關文章