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

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

本文就來(lái)分享幾個(gè)開(kāi)源的瀑布流實(shí)現(xiàn)工具，這些工具不僅簡(jiǎn)化了復(fù)雜的計(jì)算過(guò)程，還提供了豐富的配置選項(xiàng)和靈活的擴(kuò)展能力，讓開(kāi)發(fā)者能夠輕松實(shí)現(xiàn)橫向瀑布流布局。

橫向瀑布流

Justified Layout

Justified Layout 是一個(gè)輕量級(jí)的 JavaScript 庫(kù)，它專為幫助開(kāi)發(fā)者構(gòu)建類似 Flickr 網(wǎng)站上的圖片展示布局而設(shè)計(jì)。這個(gè)庫(kù)的核心理念在于通過(guò)算法自動(dòng)調(diào)整圖像的大小和間距，以達(dá)到視覺(jué)上的平衡感，同時(shí)保持圖像比例不變。

圖片

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

Justified-Gallery

Justified Gallery 是一個(gè)開(kāi)源的 JavaScript 庫(kù)，用于在網(wǎng)頁(yè)上創(chuàng)建高質(zhì)量的圖像瀑布流，讓圖像排列既美觀又專業(yè)。知名攝影社交網(wǎng)站 500px 就是使用 Justified Gallery 來(lái)展示圖像的。

圖片

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

React Grid Gallery

React Grid Gallery 是一個(gè)基于 React 的圖片畫(huà)廊組件，它受Google Photos的啟發(fā)，專為React應(yīng)用設(shè)計(jì)，旨在提供高效、美觀且功能強(qiáng)大的圖片展示解決方案。

圖片

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

react-photo-gallery

React Photo Gallery 是一個(gè)用于 React 的響應(yīng)式、可組合且可定制的圖片畫(huà)廊組件。這個(gè)組件的主要特點(diǎn)是它能夠保持照片的原始寬高比，并且可以根據(jù)需要?jiǎng)?chuàng)建瀑布流布局。React Photo Gallery 支持縱向和橫向方布局，并且提供了一個(gè)圖像渲染器，允許你自定義實(shí)現(xiàn)諸如圖片選擇、收藏、標(biāo)題等功能。

圖片

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

react-photo-album

React Photo Album 是一個(gè)為 React 設(shè)計(jì)的響應(yīng)式照片相冊(cè)組件。它支持行、列和瀑布流布局，靈感來(lái)源于 react-photo-gallery，但進(jìn)行了全新的重構(gòu)。

圖片

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

vue-photo-album

Vue Photo Album 是一個(gè)為 Vue 3 設(shè)計(jì)的響應(yīng)式照片相冊(cè)組件。它受到了 react-photo-album 的啟發(fā)，但完全為 Vue 3 生態(tài)系統(tǒng)重新設(shè)計(jì)和實(shí)現(xiàn)。Vue Photo Album 支持行、列和瀑布流布局，并允許開(kāi)發(fā)者通過(guò)自定義渲染器組件來(lái)擴(kuò)展和定制其功能。

圖片

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