淺析瀑布流佈局原理

前言

上一文講到了圖片, 這裡我們就講一個常用的圖片場景: 瀑布流, 他的實現和最佳化

什麼瀑布流

瀑布流，又稱瀑布流式佈局。是比較流行的一種網站頁面佈局，視覺表現為參差不齊的多欄佈局，隨著頁面捲軸向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部。最早採用此佈局的網站是 Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格。

更直觀的展示如下圖所示:

優缺點

優點：

外表美觀，更有藝術性。
使用者瀏覽時的觀賞和思維不容易被打斷，留存更容易。

缺點：

使用者無法瞭解內容總長度，對內容沒有宏觀掌控。
使用者無法瞭解現在所處的具體位置，不知道離終點還有多遠。
回溯時不容易定位到之前看到的內容。
容易造成頁面載入的負荷。
容易造成使用者瀏覽的疲勞，沒有短暫的休息時間。

實現方案

純 CSS 實現

這裡要介紹 CSS 屬性: column

現在常用的 column 屬性有這些

column-count
將一個元素的內容分成指定數量的列。涉疫設定為具體數字, 或者auto
column-fill
控制元素的內容在分成多列時如何平衡。有 auto、balance 兩個值, 分別表示自動填充和水平分配
column-gap
兩列間的距離, 可設定: px, 百分比, rem
column-rule
列布局中, 分割線的設定, 可以設定風格、寬度、顏色(和 border 相同的引數)
column-span
列布局中橫向的佔用元素, 具體作用可檢視此處
column-width
每一列的最小寬度, 如果外部容易寬度特別小, 則會失效

另一個 CSS 屬性 columns

他是用來設定元素的列寬和列數屬性, 是由 column-width 和 column-count 兩屬性合併而來的簡寫屬性

關於相容性, 目前來看相容性還可以, 可適應大多數情況

相關 CSS 屬性的詳情, 可點選此處

這裡再提供一個我使用 columns 的 demo, 預覽圖:

線上檢視地址: https://grewer.github.io/JsDe...
(_可透過縮放瀏覽器大小來檢視他的效果_)

js 實現

透過 js 我們也可以實現瀑布流, 核心思路是:

我們固定每張圖片的寬度, 如 200px, 這樣我們就能計算出當前螢幕中一行是 N 張圖片
透過步驟 1 中計算出來的數量, 我們建立高度陣列, 用來存放每一列的高度
遍歷圖片, 找到步驟 2 中高度陣列的最小值(預設為 0), 這樣我們在對應序號插入圖片, 同時高度陣列中, 也更新他的高度

具體實現

第 1,2 步中的初始化和高度陣列

    const width = 200; // 預設設定為 200px 的寬度

    const columns = Math.floor(window.innerWidth / 200) // 計算出當前頁面的列
    
    const columnsHeightArr = []
    
    // mock 圖片地址
    const urls = new Array(10).fill(0).map((it, index) => {
        return `https://grewer.github.io/JsDemo/waterfallLayout/imgs/img_${index}.png`
    })

在獲取圖片高度時, 我們需要注意的是, 圖片未載入完成時, 是無法獲取到圖片高度的

所以這裡我們準備先載入圖片, 在圖片全部載入完成後, 再進行高度的計算

    let flag = 0
    
    const getImg = (url) => {
        let img = new Image();
        img.src = url;
        const imgCallback = () => {
            flag++;
            if (flag === urls.length) {
                handler();
            }
        }
        
        // 是否快取
        if (img.complete) {
            imgCallback()
        } else {
            img.onload = imgCallback
        }
    }

在圖片全部載入完畢之後, 進入 handler 函式, 正式操作圖片:

    // 新增圖片到容器中, 透過 position: absolute 的方案來實現
    const appendImages = (url, position, top) => {
        const img = document.createElement('img');
        img.src = url;
        img.style.left = (position * width) + 'px';
        img.style.top = top + 'px';
        container.appendChild(img)
        return img
    }
    
    // 獲取高度陣列中的最小高度
    const getMin = (arr) => {
        let minHeight = arr[0];
        let index = 0
        for (let i = 1; i < arr.length; i++) {
            if (arr[i] < minHeight) {
                minHeight = arr[i]
                index = i
            }
        }
        return {index, minHeight}
    }
    const insertImages = () => {
        for (let i = 0; i < urls.length; i++) {
            // 判斷是否小於一行, 這樣我們就能直接加入了
            if (columnsHeightArr.length < columns) {
                const img = appendImages(urls[i], i, 0)
                columnsHeightArr[i] = img.offsetHeight;
            } else {
                const {index, minHeight} = getMin(columnsHeightArr)
                const img = appendImages(urls[i], index, minHeight);
                columnsHeightArr[index] = columnsHeightArr[index] + img.offsetHeight;
            }
        }
    }

最後的實現效果:

因為圖片是一口氣載入完, 再 append 到頁面中的, 所以頁面不會顯示有圖片的載入流程

線上 demo : 點選檢視

最佳化圖片載入

在上一方案中, 我們是先載入完所有圖片, 再將圖片放到容器中
這樣做的缺點就是: 頁面載入緩慢, 並且圖片也沒有載入流程, 頁面出現的有點突兀

假設:
如果我們一開始不載入所有的圖片,而是載入 N 張, 分批次載入, 這樣會不會好很多呢?

嘗試解決:


    const insertImages = () => {
        if (!urls || urls.length <= 0) {
            console.log('done 全部載入完畢')
            return
        }
        
        // 一行有 N 張圖片的話, 我們就以 N 作為一個批次載入的圖片數量
        const arr = urls.splice(0, columns)
        
        let flag = arr.length;
        arr.forEach(async (item, i) => {
            if (columnsHeightArr.length < columns) {
                const img = await loadImage(item);
                appendImages(img, i, 0)
                columnsHeightArr[i] = img.offsetHeight;
            } else {
                const img = await loadImage(item);
                const {index, minHeight} = getMin(columnsHeightArr)
                appendImages(img, index, minHeight);
                columnsHeightArr[index] = columnsHeightArr[index] + img.offsetHeight;
            }
            // 做出檢查, 所有圖片是否都已經載入完畢
            flag--;
            
            if (flag <= 0) {
                // 呼叫自身, 直到圖片全部載入完畢
                insertImages()
            }
        })
        
    }

效果展示:

線上 demo : 點選檢視

從目前的效果來看, 雖然載入看上去好一點點, 但還是不盡如人意

從根本原因上看, 是因為我們要獲取圖片的長寬來計算佈局, 所以要等待載入

那麼我們提出設想, 在獲取到圖片路徑的同時, 能獲取尺寸比例, 那麼載入速度問題也就解決了

圖片源頭最佳化

假設我們的初始資料是這樣:

[
    {
        "url": "https://grewer.github.io/JsDemo/waterfallLayout/imgs/img_0.png",
        "width": 1776,
        "height": 1184
    },
    //...省略
]

或者是這樣:

[
    "https://grewer.github.io/JsDemo/waterfallLayout/imgs/img_0.png?w=1776&h=1184",
    // ... 省略
]

如果是長寬比例也是沒問題的:


[
    "https://grewer.github.io/JsDemo/waterfallLayout/imgs/img_0.png?scale=1.5",
    // scale = height/width
    // ... 省略
]

這樣的資料, 需要一定的支援, 比如在上傳時, 前端將圖片的尺寸一起上傳, 或者後端計算尺寸存入資料庫等等

我們載入這樣的資料, 就只要關心高度即可, 不用再擔心圖片是什麼時候載入完成的

    const insertImages = () => {
        data.forEach( (item, i) => {
            const img = document.createElement('img');
            img.src = item.url;
            const height = ((item.height/item.width) * (200-gap)) + gap;
            if (columnsHeightArr.length < columns) {
                appendImages(img, i, 0, height)
                columnsHeightArr[i] = height;
            } else {
                const {index, minHeight} = getMin(columnsHeightArr)
                appendImages(img, index, minHeight, height);
                columnsHeightArr[index] = columnsHeightArr[index] + height;
            }
        })
    }

效果展示:

線上 demo : 點選檢視

從這裡我們擺脫了圖片的載入速度限制, 可以說是最佳化成功了(當然這種方案是需要一定支援)

長列表的最佳化

瀑布流和正常的列表一樣, 也會存在一個列表過長時的渲染問題

之前我在一篇文章裡介紹了長列表的最佳化(點選此處檢視), 裡面介紹了幾種方案

虛擬列表是一種很好的最佳化方案, 但是他和瀑布流佈局並不好相容, 因為虛擬列表需要的是每一行的高度(即使高度不一樣)

但是瀑布流是按照列來佈局的, 沒有完整行的概念, 這就造成了不相容的衝突

目前來看 CSS 屬性 content-visibility 可支援瀑布流的最佳化, 但是具體效果還需要在業務中實戰出來

總結

本文介紹了瀑布流的概念, 以及兩種不同的實現方案, 並對 JS 方案作出了一定的最佳化解決
CSS 方案比較方便, 但是相容性略差
JS 方案是一種普適性較強的方案, 針對圖片的載入效能和佈局來說, 需要對圖片的比例作出提前的計算

這裡留下本文所有 demo 的原始碼地址供大家參考: 點此檢視

淺析瀑布流佈局原理

前言

什麼瀑布流

優缺點

實現方案

純 CSS 實現

js 實現

具體實現

最佳化圖片載入

圖片源頭最佳化

長列表的最佳化

總結

引用

相關文章