瀑布流布局因其高效利用空間和直觀展示內容的特性，在電商（如淘寶展示商品列表）、社交（如小紅書展示帖子）等眾多場景中廣泛應用。在縱向瀑布流布局中，核心思想就是通過追蹤每一列最后一個元素的位置來確定新元素應該被添加到哪一列。

相比之下，橫向瀑布流布局則顯得更為復雜。在橫向瀑布流中，每行的高度和寬度被設定為統一，內部元素的寬度各異，要求算法能夠精確計算并排列這些元素，確保它們能夠緊密地填滿每一行。

本文就來分享幾個開源的瀑布流實現工具，這些工具不僅簡化了復雜的計算過程，還提供了豐富的配置選項和靈活的擴展能力，讓開發者能夠輕松實現橫向瀑布流布局。

橫向瀑布流

Justified Layout

Justified Layout 是一個輕量級的 JavaScript 庫，它專為幫助開發者構建類似 Flickr 網站上的圖片展示布局而設計。這個庫的核心理念在于通過算法自動調整圖像的大小和間距，以達到視覺上的平衡感，同時保持圖像比例不變。

圖片

Github：https://github.com/flickr/justified-layout

Justified-Gallery

Justified Gallery 是一個開源的 JavaScript 庫，用于在網頁上創建高質量的圖像瀑布流，讓圖像排列既美觀又專業。知名攝影社交網站 500px 就是使用 Justified Gallery 來展示圖像的。

圖片

Github：https://github.com/miromannino/Justified-Gallery

React Grid Gallery

React Grid Gallery 是一個基于 React 的圖片畫廊組件，它受Google Photos的啟發，專為React應用設計，旨在提供高效、美觀且功能強大的圖片展示解決方案。

圖片

Github：https://github.com/benhowell/react-grid-gallery

react-photo-gallery

React Photo Gallery 是一個用于 React 的響應式、可組合且可定制的圖片畫廊組件。這個組件的主要特點是它能夠保持照片的原始寬高比，并且可以根據需要創建瀑布流布局。React Photo Gallery 支持縱向和橫向方布局，并且提供了一個圖像渲染器，允許你自定義實現諸如圖片選擇、收藏、標題等功能。

圖片

Github：https://github.com/neptunian/react-photo-gallery

react-photo-album

React Photo Album 是一個為 React 設計的響應式照片相冊組件。它支持行、列和瀑布流布局，靈感來源于 react-photo-gallery，但進行了全新的重構。

圖片

Github：https://github.com/igordanchenko/react-photo-album

vue-photo-album

Vue Photo Album 是一個為 Vue 3 設計的響應式照片相冊組件。它受到了 react-photo-album 的啟發，但完全為 Vue 3 生態系統重新設計和實現。Vue Photo Album 支持行、列和瀑布流布局，并允許開發者通過自定義渲染器組件來擴展和定制其功能。

圖片

Github：https://github.com/tenthree/vue-photo-album