CSS Masonry Layouts【一】之 multi-columns

Masonry Layouts —— 瀑布流佈局，核心是一個網格佈局，每行包含的內容列表的高度是不可控的，而且，每一個內容列表呈堆棧狀排列。稱做瀑布流，最關鍵的是--各堆棧間沒有多餘的間距差（將整個佈局看作一個大的容器，最新進來的內容元素，永遠在高度最短的那一列上）。具體以下圖所示：

注：上圖是 二次元社區GACHA 的插畫頻道，該瀑布流插件基於NEJ，交互要求是：每一列固定寬度，根據頁面大小顯示不一樣的列，頁面寬度，重排，預加載一屏，滾動加載。設計的思路是：

1. 計算列數：根據當前頁面（容器）寬度，計算一行能夠排放幾個元素
2. 初始堆棧：創建列堆棧數組，用於存放各個列堆棧的高度
3. 最小索引：獲得列堆棧數組中的最小值和其對應索引
4. 元素定位：全部元素 absolute 定位，設置後續加入元素的 top 值爲列堆棧數組中的最小值，同時設置它的 left 值爲該索引對應列的 left 值
5. 更新堆棧：更新列堆棧數組中該索引下元素的值( no.4 中的 top 值加元素自己的的高度)

• 注：上面略去了對數據的預處理（包括圖片的等比縮放以及屬性的二次處理等）以及滾動加載的處理過程，對於預加載一屏，因爲元素高度的不可控性，只能根據瀑布流元素的平均高度行預估計，而後推算出一屏須要元素的範圍，而後請求相應數量。

簡化版應該是下面這樣的：

可是，這樣處理，表現層的東西依賴 javaScript 來處理，有點多餘（當時確實是惟一的辦法），能不能用樣式來搞定呢？

首先，會想到 float 或者 inline-block ，可是它們都沒辦法很好的控制列表之間的間距。最終獲得的效果就像下面這樣：

那，除此以外，就沒有單純用 css 能夠搞定的方法了嗎？近幾年，css 的技術更新頻繁，出現了不少新的佈局方法：multi-columns、Flexbox、Grid。用上面提到的佈局方法可否實現瀑布流呢？

multi-columns

multi-columns 產生之初，是用來實現文本多列排列，相似報紙、雜誌的文本排列方式。multi-columns 的列佈局方式跟瀑布流的有些相似：

demo

三列：

四列：

猛一看很完美。可是，與使用 js 實現對比之下：

• multi-columns 的元素是縱向排列的（在對元素前後次序有要求的狀況下不理想）
• 隨着容器寬度變化，明顯發現出現比較大的空白區域（從三列到四列）

第一個問題，multi-columns 的這種佈局方式，決定了只能縱向排列；對於第二個問題:

multi-columns 簡略佈局思想

首先，只有在多列元素集含有塊級元素、而且避免在元素內部斷行併產生新列的時候，纔會涉及到佈局，上面的瀑布流例子，要是不避免在元素內部斷行併產生新列，將會是這樣的：

只有將屬性 break-inside 設置爲 avoid，纔會有塊級元素的效果。

回到上面說到的空白區域的問題，multi-columns 的總體佈局會受到幾個因素的影響：

整體而言，優先級：自身屬性 > 容器屬性。

當容器的高度小於按照 column-count 佈局後的列的高度，會發生元素斷裂、跨列的現象；當容器的高度大於按照 column-count 佈局後的列的高度，單個列的高度會由最優佈局算法生成。

所謂最優佈局算法，簡單來講，就是自適應：

• 首先取 column-count ，若是元素（block）個數不超過 column-count ，佈局成一橫排；

• 如果元素（block）個數超過 column-count ，首先在第一列增長 block 元素，然後以第一列的高度爲標準，來填充後續各列（此時會發生列填充不滿的狀況）；

• 如果以後元素中發現一個高度較高的X元素，對於佈局的調整會以這個較高的X元素爲分界線，不會將後面的低高度元素排列到X元素以前：

就會出現較大空白區域的狀況。
因此，出現空白區域的根本緣由是：multi-columns 佈局的特色是按列布局、順序計算、順序排列，前面有較大空白區域，不會用後續元素去填補。

想要具體瞭解 multi-columns 佈局，請參考：

• CSS Writing Modes Level 3
• CSS3魔法堂：說說Multi-column Layout

---

總結：

multi-columns 瀑布流佈局，適用於：

1. 元素不存在優先級，或者優先級要求較低
2. 元素高度差別不明顯（防止出現大片空白區域）
3. 不兼容低版本瀏覽器（最重要的）

除了 multi-columns， Flexbox 以及 Grid 也能夠運用到瀑布流佈局中來。未完，待續。。。