作者：蘑菇街前端團隊

鏈接：https://juejin.im/post/5e05acf0f265da33d158a1b1

零、介紹

這篇文章主要是介紹網站頁面瀑布流布局的實現，主要包括：

1. 瀑布流是什么
2. 瀑布流的實現原理
3. 瀑布流的使用場景
4. 實現中有哪些問題 & 如何解決
5. 可擴展的使用場景

一、瀑布流是什么

瀑布流， 又稱瀑布流式布局，是比較流行的一種網站頁面布局。視覺表現為寬度相等高度不定的元素組成的參差不齊的多欄布局，隨著頁面向下滾動，新的元素附加到最短的一列而不斷向下加載。

二、瀑布流的實現原理

瀑布流本質上就是尋找各列之中高度最小的一列，并將新的元素添加到該列后面，只要有新的元素需要排列，就繼續尋找所有列中的高度最小列，把后來的元素添加到高度最小列上。

圖解基礎瀑布流

我們接下來看下為什么要永遠尋找最小列？

先看圖1的排列順序，第一排元素的頂部會處于同一個高度，依次排列在頂端，第一排排滿之后，第二排從左往右排列。然而這種排列方式很容易出現其中一列過長或其中一列過短的情況。

為了解決 圖1 中列可能過長或者過短的問題，我們按照 圖2 的方式將元素放在最短的一列進行排列。

三、瀑布流的使用場景

瀑布流滑動的時候會不停的出現新的東西，吸引你不斷向下探索，巧妙的利用視覺層級、視線的任意流動來緩解視覺的疲勞，采用這種方案可以延長用戶停留視覺，提高用戶粘度，適合那些隨意瀏覽，不帶目的性的使用場景，就像逛街一樣，邊走邊看，所以比較適合圖片、商品、資訊類的場景，很多電商相關的網站都使用了瀑布流進行承載。

上圖的蘑菇街 PC 瀑布流效果是在基礎瀑布流的基礎上做了擴展改造, 在瀑布流頂部某一列或某幾列插入其他非瀑布流內容。

本文將介紹這種擴展瀑布流的四列實現場景，適用基礎場景如下：

四、瀑布流的的實現有哪些問題&如何解決

1. 非瀑布流內容如何插入？
2. 如何尋找所有列的高度最小者？
3. 如何渲染瀑布流？

Vue 實現瀑布流

我們采用 Vue 框架來實現瀑布流，其一些自帶屬性使我們的瀑布流實現更加簡單。

• 通過 ref 可以很方便的獲取每列高度，通過比較算法算出高度最小列。
• 拿到高度最小列之后，將下個要插入的元素數據放到最小列的數據列表（columnList）中，通過操作數據完成元素渲染。
• 利用 Vue 的具名插槽在瀑布流頂部插入其他非瀑布內容。
• 通過 watch 監測元素渲染，判斷是否繼續進行渲染和請求更多元素數據。

非瀑布流內容如何插入

通過 Vue 的具名插槽（slot），將非瀑布流元素作為父組件的內容傳遞給瀑布流子組件。

• 父組件通過 HTML 模板上的槽屬性關聯具名插槽，非瀑布流內容作為具名插槽的內容提供給子組件。
• 具名插槽有：first-col、second-col、 third-col、 last-col、 merge-slot，分別代表第一、二、三、四、合并列。
• 子組件通過插槽名字判斷將非瀑布流內容放在哪一列。如果插槽存在，則將其所攜帶的內容插入到置頂位置。
• 因為合并列的特殊性，如果包含合并列，則將合并列絕對定位到頂部，合并列占的瀑布流對應的列進行下移。父組件傳合并列相關的參數給子組件：merge(判斷是否包含合并列), mergeHeight(合并列的高度)，mergeColunms(合并的是哪 2 列)。

代碼實現

<!-- 父組件 -->
<div class="parent">
    <Waterfall :merge=true :mergeHeight=800 mergeColumns=[2,3]>
        <template slot="first-col">
            <!-- 第一列內容...      -->
        </template>
        <template slot="second-col">
            <!-- 第二列內容...     -->
        </template>
        <template slot="third-col">
            <!-- 第三列內容...      -->
        </template>
        <template slot="last-col">
            <!-- 第四列內容...      -->
        </template>
        <template slot="merge-col">
            <!-- 合并內容...     -->
        </template>
    </Waterfall>
</div>

<!-- 子組件（waterfall） -->
<div class="child">
    <!-- 第一列 -->
    <div ref="column1" :style="{marginTop: merge && mergeColumns.indexOf(1) > -1 ? mergeHeight + 'px':''}">
        <template v-if="$slots['first-col']">
            <slot name="first-col"></slot>
        </template>
        <template v-for="(item, index) in columnList1">
            <!-- 第一列瀑布流內容... -->
        </template>
    </div>
    <!-- 第二列 -->
    <div ref="column2" :style="{marginTop: merge && mergeColumns.indexOf(2) > -1 ? mergeHeight + 'px':''}">
        <template v-if="$slots['second-col']">
            <slot name="second-col"></slot>
        </template>
        <template v-for="(item, index) in columnList2">
            <!-- 第二列瀑布流內容... -->
        </template>
    </div>
    <!-- 第三列 -->
    <div ref="column3" :style="{marginTop: merge && mergeColumns.indexOf(3) > -1 ? mergeHeight + 'px':''}">
        <template v-if="$slots['third-col']">
            <slot name="third-col"></slot>
        </template>
        <template v-for="(item, index) in columnList3">
            <!-- 第三列瀑布流內容... -->
        </template>
    </div>
    <!-- 第四列 -->
    <div ref="column4" v-if="is4Columns">
        <template v-if="$slots['last-col']">
            <slot name="last-col"></slot>
        </template>
        <template v-for="(item, index) in columnList4">
            <!-- 第四列瀑布流內容... -->
        </template>
    </div>
    <!-- 合并塊非瀑布流內容 -->
    <div class="column-merge" v-if="merge" :style="{left: (mergeColumns[0] - 1)*330 + 'px'}">
        <slot name="merge-col"></slot>
    </div>
</div>

如何尋找所有列的高度最小者

每一列都定義一個 ref，通過 ref 獲取當前列的高度，如果該列上方有合并塊，則高度要加上合并塊的高度，然后比較 4 列高度取到最小高度，再通過最小高度算出其對應的列數。

代碼實現

// 通過ref獲取每列高度，column1，column2，column3，column4分別代表第一、二、三、四列
let columsHeight=[this.$refs.column1.offsetHeight, this.$refs.column2.offsetHeight, this.$refs.column3.offsetHeight, this.$refs.column4.offsetHeight]

// 如果包含合并塊, 則更新高度,合并塊下的列高要增加合并塊的高度
if(this.merge){
    // 如果有合并列，則合并列下的列高度要加合并內容的高度。
    columsHeight[0]=this.mergeColumns.indexOf(1) > -1 ? columsHeight[0] + this.mergeHeight : columsHeight[0];
    columsHeight[1]=this.mergeColumns.indexOf(2) > -1 ? columsHeight[1] + this.mergeHeight : columsHeight[1];
    columsHeight[2]=this.mergeColumns.indexOf(3) > -1 ? columsHeight[2] + this.mergeHeight : columsHeight[2];
		columsHeight[3]=this.mergeColumns.indexOf(4) > -1 ? columsHeight[3] + this.mergeHeight : columsHeight[3];
}

// 獲取各列最小高度
let minHeight=Math.min.apply(null, columsHeight);

// 通過最小高度,得到第幾列高度最小
this.getMinhIndex(columsHeight, minHeight).then(minIndex=> {
	 // 渲染加載邏輯
});

// 獲取高度最小索引函數
getMinhIndex(arr, value){
    return new Promise((reslove)=> {
        let minIndex=0;
        for(let i in arr){
            if(arr[i]==value){
                minIndex=i;
                reslove(minIndex);
            }
        }
    });
}

如何渲染瀑布流

瀑布流常用在無限下拉加載或者加載數據量很大、且包含很多圖片元素的情景，所以通常不會一次性拿到所有數據，也不會一次性將拿到的數據全部渲染到頁面上，否則容易造成頁面卡頓影響用戶體驗，所以何時進行渲染、何時繼續請求數據就很關鍵。

何時渲染

選擇渲染的區域為滾動高度 + 可視區域高度的 1.5 倍，既可以防止用戶滾動到底部的時候白屏，也可以防止渲染過多影響用戶體驗。如果 最小列的高度 - 滾動高度 < 可視區域高 * 1.5 ，則繼續渲染元素，否則不再繼續渲染。

何時請求數據

當已渲染的元素+可視區域可以展示的預估元素個數 > 已請求到的個數 的時候才去繼續請求更多數據，防止請求浪費。 如果 已加載的元素個數 + 一屏可以展示的元素預估個數 > 所有請求拿到的元素個數 ，則觸發下一次請求去獲取更多數據。

瀑布流渲染核心思路

• 監測滾動，判斷是否符合渲染條件，如果符合條件則開始渲染。
• 定義一個渲染索引 renderIndex，每渲染一個元素后 renderIndex + 1, 實時監測 renderIndex 的變化， 判斷是否符合渲染和數據請求條件。
• 拿到最小高度列索引后，將下一個元素插入到該列中，并觸發 renderIndex + 1 進行下一輪渲染判斷。

代碼實現

data() {
    return {
        columnList1: [], // 第一列元素列表
        columnList2: [],
        columnList3: [],
        columnList4: [],
        renderIndex: -1, // 渲染第幾個item
        isRendering: false, // 是否正在渲染
        itemList: [], // 所有元素列表
        isEnd: false
    };
}

watch: {
    renderIndex(value) {

        // 當前滾動條高度
        const scrollTop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

        // 最小列高度 - 滾動高度 < 可視區域高的的1.5倍
        if (renderMinTop - scrollTop < winHeight * 1.5) {
            this.renderWaterfall();
        }

        // 已加載的元素個數 + 一屏可以展示元素預估個數 > 所有請求拿到的元素個數
        if (loadedItemNum + canShowItemNum > this.itemList.length && !this._requesting && !this.isEnd) {
            // 請求瀑布流數據
            this.getData();
        }
    }
}

scroll() {

    // 當前滾動條高度
    const scrollTop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

    // 底部檢測高度
    const bottomDetectionTop=this.$refs.bottomDetection.offsetTop;

    const tempLastScrollTop=lastScrollTop; // lastScrollTop:上次一滾動高度
    lastScrollTop=scrollTop;

    if (tempLastScrollTop===-1) {
        this.renderWaterfall();
    }

    // 如果是向下滾動則判斷是否需要繼續渲染
    if (scrollTop > tempLastScrollTop) {
        if (bottomDetectionTop - tempLastScrollTop < winHeight * 1.5 && !this.isRendering) {
            this.renderWaterfall();
        }
    }

}

renderWaterfall() {

    // 如果還沒有數據、所有數據已經渲染完成、正在渲染則不進行渲染計算操作
    if (this.itemList.length===0 || this.renderIndex >=this.itemList.length - 1 || this.isRendering) {
        if (this.renderIndex===this.feedList.length - 1 && !this._requesting && !this.isEnd) {
            this.getData();
        }
        return;
    }
    this.isRendering=true;

    /***
    *** 獲取最小高度代碼
    ***/

    this.getMinhIndex(columnsHeight, minHeight).then(minIndex=> {

        const key=`columnList${minIndex + 1}`;
        let itemData=this.itemList[this.renderIndex + 1];
        this[key]=this[key].concat(itemData);
        this.$nextTick(()=> {
            this.renderIndex=this.renderIndex + 1;
            this.isRendering=false;
        });
    });
}

五、可擴展的使用場景

為了靈活使用瀑布流，在設計的時候就做好了擴展準備，通過 HTML 模板代碼可以看出來，具名插槽的內容可以放在任意列，并沒有限制死，所以可以擴展使用到以下各個場景。

關注我

大家好，這里是 FEHub，每天早上 9 點更新，為你分享優質精選文章，與你一起進步。

如果喜歡這篇文章，希望大家點贊，評論，轉發。你的支持，是我最大的動力，咱們明天見 :)

關注公眾號 「FEHub」，每天進步一點點

周末福利

感謝大家的支持，周末領紅包，加雞腿。

公眾號后臺回復關鍵字：「雞腿」，即可參與紅包抽獎。