么是瀑布流

瀑布流布局就像在游樂園里排隊玩水滑梯一樣有趣！想象一下，你站在一個高高的平臺上，眼前是一排排的水滑道，每個滑道的終點都是個小水池。你站在起點，一溜煙地往下滑，速度飛快！你的朋友們也在旁邊的滑道上滑來滑去，好不熱鬧。

瀑布流布局如此有趣，因為它不像傳統的布局一樣一行行地擺放元素，而是像水滑梯一樣，元素從上到下、從左到右地排列。每個元素的大小不一，就像人們身材各異，有的高，有的矮，有的胖，有的瘦。它們像水滑道上的人一樣緊緊挨著，在空間里形成了一個有趣的錯落有致的景象。

想象一下，你站在最高的滑道上，你是那個最炫酷的元素，所有的目光都聚集在你身上。你自豪地往下滑，經過每個滑道上的人們，他們驚嘆你的高度，贊嘆你的美麗。你順利地滑到終點，掀起一片水花，大家都為你鼓掌歡呼！

瀑布流布局就是這樣有趣又引人注目，每個元素都有機會在舞臺上展示自己的風采。它讓我們的網頁看起來活力十足，像一場歡樂的游樂園冒險！

小紅書上的瀑布流布局

就是這樣，每個商品就像超市里的貨架，展示著各種各樣的內容。你可以往下滑動頁面，看到一個美食的推薦，繼續滑動又遇到了一篇旅行攻略，再往下滑就是一篇關于時尚的文章。這些內容就像超市里的商品，你可以隨心所欲地瀏覽，發現自己感興趣的東西，積極互動，獲取靈感

你以為的這樣

哈哈，雖然不是這樣，但卻有共同的特性

從圖中可以看出它的特性，

從布局角度來看，瀑布流布局更類似網格布局中自動放置網格項目的布局，但又沒有嚴格遵循該布局模式。

最著名的瀑布流布當屬 Pinterest，比如他的搜索結果頁面的布局效果：

我們來看個例子

<div class="masonry--container">
   <div class="item">
       <img src="https://picsum.photos/1024/860?random=1" alt="">
       <h3>Blog Post</h3>
       <p>Lorem ipsum dolor si...</p>
   </div>
   <!-- 省略其他 item -->
</div>

@layer layout {
  .masonry--container {
      column-count: 4;
      column-gap: 1rem;
  }
}

在上面的例子中，你會看到整個布局看起來像瀑布流布局。然而，項目（卡片）的順序沿著列運行。也就是說，使用多列布局來實現瀑布流布局和真正的瀑布流布局之間有著關鍵性的區別：“在多列布局中，項目（卡片）是按列顯示的，通常在瀑布流布局中，希望項目（卡片）是按行顯示”。

借網上的一個圖：

因此，多列布局實現的“瀑布流布局”有可能無法滿足我們實際的業務需求。例如，Pinterest 網站的搜索結果頁，期望搜索出來的結果總是排列在前面，比如說頁面最頂部就能看到搜索的結果，而不是像多列布局實現的效果那樣，排在前面的都在第一列。

而且加載更多的時候，我們是希望按行加載的，而不是重新按多列排。

調研

目前單用css還是無法實現真正的瀑布流布局， 即便使用CSS 網格布局中自動放置網格項目的特性（即 grid-auto-flow: dense），也會有諸多問題。

只能通過js來彌補這個上面提到的缺陷 當使用JavaScript來實現按行加載的瀑布流時，可以結合使用DOM操作和CSS樣式來達到效果。以下是一個簡單的JavaScript方案：

首先，創建一個包含瀑布流元素的容器，并為每個元素添加一個自定義的類名，例如".item"。

<div class="container">
<div class="item">瀑布流元素1</div>
<div class="item">瀑布流元素2</div>
...
</div>

接下來，使用JavaScript來控制瀑布流的加載和排序。

window.addEventListener("load", function() {
// 獲取容器和瀑布流元素
const container=document.querySelector(".container");
const items=document.querySelectorAll(".item");
  
// 記錄每一行的高度
let rowHeights=[];
  
// 遍歷瀑布流元素，計算每一行的高度并進行排序
items.forEach(function(item) {
// 將元素添加到容器中
container.appendChild(item);
  
// 獲取元素的高度
const itemHeight=item.offsetHeight;
  
// 檢查當前行是否有足夠的空間容納元素
const rowIndex=rowHeights.findIndex(function(rowHeight) {
return rowHeight + itemHeight <=container.offsetHeight;
});
  
if (rowIndex !==-1) {
// 如果有足夠的空間，將元素添加到對應行中
item.style.order=rowIndex;
rowHeights[rowIndex] +=itemHeight;
} else {
// 如果沒有足夠的空間，創建新行并添加元素
const newRow=document.createElement("div");
newRow.classList.add("row");
newRow.appendChild(item);
container.appendChild(newRow);
rowHeights.push(itemHeight);
}
});
});

在這個JavaScript方案中，我們使用offsetHeight屬性獲取到每個瀑布流元素的高度，并根據容器的高度動態計算每一行的高度。然后，通過設置元素的order屬性來實現按行排序的效果。

記得在CSS中設置.row類的樣式，以便美化新創建的行。

.row {
display: flex;
}

以上的JavaScript方案會在頁面加載完成后自動按行加載和排序瀑布流元素

作者：糖墨夕
鏈接：https://juejin.cn/post/7340909611098079273