• ? Github Star: 16.3K^[1]

• ? 官網(wǎng)^[2]

1、Masonry 是什么？

Masonry 是一個(gè)開(kāi)源 JavaScript 庫(kù)，允許創(chuàng)建響應(yīng)式的、瀑布流樣式的網(wǎng)格布局。特別適合圖片畫(huà)廊和其他需要?jiǎng)討B(tài)調(diào)整大小和排列的元素。Masonry 通過(guò)檢測(cè)每個(gè)元素的寬度，然后計(jì)算它們?cè)诰W(wǎng)格中的最佳位置，實(shí)現(xiàn)視覺(jué)上的整齊排列。

Masonry 的工作原理是將每個(gè)元素視為一個(gè)磚塊，根據(jù)磚塊的大小來(lái)填充網(wǎng)格，每行都盡可能地整齊。即使元素的大小不同，它們也能在網(wǎng)格中保持美觀的排列。

關(guān)鍵特性

1. 1. 響應(yīng)式：布局會(huì)根據(jù)屏幕尺寸的變化自動(dòng)調(diào)整。

2. 2. 多列布局：可以創(chuàng)建多列的網(wǎng)格布局。

3. 3. 延遲加載：支持延遲加載圖片，提高頁(yè)面加載速度。

4. 4. 可定制：提供了多種選項(xiàng)和回調(diào)函數(shù)，以適應(yīng)不同的布局需求。

5. 5. 兼容性：支持現(xiàn)代瀏覽器，包括移動(dòng)設(shè)備。

Masonry 可應(yīng)用于電商網(wǎng)站的商品展示、圖片分享平臺(tái)的作品集展示、個(gè)人博客和社交媒體的內(nèi)容布局，以及 React 和 Vue.js 應(yīng)用的響應(yīng)式設(shè)計(jì)。

2、快速開(kāi)始

1、引入庫(kù)文件

在項(xiàng)目中使用 Masonry，首先需要引入它，可以通過(guò) npm 或 yarn 管理工具安裝，也可以通過(guò) CDN 鏈接引入，或者直接下載到本地在引入。

npm install masonry-layout --save
# yarn 
yarn add masonry-layout

2、準(zhǔn)備容器和元素

接下來(lái)，需要?jiǎng)?chuàng)建一個(gè)容器元素，并在容器中添加需要的瀑布流元素，設(shè)置合適的 CSS 樣式，可以指定元素的寬度和高度。

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item grid-item--width2 grid-item--height2"></div>
    <div class="grid-item grid-item--height3"></div>
    <div class="grid-item grid-item--height2"></div>
    <div class="grid-item grid-item--width3"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

3、初始化 Masonary

使用 Masonry 函數(shù)初始化，傳入容器元素選擇器和配置選項(xiàng)。

const masonry = new Masonry('.grid', {
  itemSelector: '.grid-item', 
  gutter: 0,
  horizontalOrder: true
})

配置選項(xiàng)中，itemSelector 指定哪些子元素將用作布局中的項(xiàng)目元素。gutter 元素水平間距。horizontalOrder 項(xiàng)目水平從左到右的順序。

4、效果展示

3、核心功能

1、常用配置選項(xiàng) Options

Masonry 提供多種配置選項(xiàng)來(lái)定制布局的行為和外觀。一些常用的配置選項(xiàng)及其作用：

• ? itemSelector: 指定 Masonry 布局中每個(gè)項(xiàng)目的選擇器。

• ? columnWidth: 指定列的寬度。

• ? gutter: 指定項(xiàng)目之間的間隙。

• ? transitionDuration: 指定布局動(dòng)畫(huà)的持續(xù)時(shí)間。

• ? percentPosition: 使用百分比來(lái)定位項(xiàng)目，以便在動(dòng)畫(huà)過(guò)程中保持正確的位置。

• ? resize: 是否在窗口大小改變時(shí)重新布局。

• ? initLayout: 是否在初始化時(shí)立即布局。

• ? fitWidth: 是否使布局的寬度適應(yīng)其容器的寬度。

2、常用方法 Methods

Masonry 提供了一系列方法來(lái)操作和控制布局。一些常用的方法及其用途：

• ? .layout(): 重新布局所有項(xiàng)目。

• ? .layoutItems(): 布局指定的項(xiàng)目元素。

• ? .reloadItems(): 重新計(jì)算項(xiàng)目的尺寸并重新布局。

• ? .appended(elem): 當(dāng)向布局中添加新項(xiàng)目時(shí)調(diào)用，以確保新項(xiàng)目被正確布局。

• ? .prepended(elem): 當(dāng)在布局開(kāi)始處添加新項(xiàng)目時(shí)調(diào)用。

• ? .remove(elem): 從布局中移除項(xiàng)目。

• ? .on( eventName, callback ): 綁定事件。

• ? .off( eventName, [callback] ): 取消綁定事件。

• ? .once( eventName, callback ): 綁定一次性事件。

4、同類型庫(kù)

• ? React Masonry Component^[3]：如果你在使用React 框架，React Masonry Component是一個(gè)基于 Masonry 的封裝組件，提供了簡(jiǎn)潔高效的使用方式，并且性能優(yōu)秀。

• ? Waterfall.js^[4]：這是一個(gè)輕量級(jí)的純JavaScript庫(kù)，用于創(chuàng)建響應(yīng)式瀑布流布局，它不依賴于任何其他庫(kù)或框架。

• ? Shuffle.js^[5]：如果要實(shí)現(xiàn)過(guò)濾、排序功能，這是一個(gè)非常不錯(cuò)的庫(kù)，并且擁有非常流暢的動(dòng)畫(huà)效果。

• ? InfiniteGrid^[6]：創(chuàng)建靈活網(wǎng)格布局的輕量級(jí) JavaScript 庫(kù)，它支持無(wú)限滾動(dòng)、分欄、響應(yīng)式布局，并提供豐富的配置選項(xiàng)，以實(shí)現(xiàn)高性能和高度可定制的動(dòng)態(tài)內(nèi)容展示。

  

5、總結(jié)

Masonry 以其簡(jiǎn)潔的 API 和強(qiáng)大的布局能力，是否可以成為你實(shí)現(xiàn)瀑布流布局的備選工具呢？希望通過(guò)本文學(xué)習(xí)了解 Masonry 基本用法，在需要時(shí)能夠想起來(lái)這個(gè)項(xiàng)目。

祝好！

引用鏈接

[1] Github Star: 16.3K: https://github.com/desandro/masonry
[2] 官網(wǎng): https://masonry.desandro.com/
[3] React Masonry Component: https://github.com/eiriklv/react-masonry-component
[4] Waterfall.js: https://github.com/raphamorim/waterfall.js
[5] Shuffle.js: https://github.com/Vestride/Shuffle
[6] InfiniteGrid: https://naver.github.io/egjs-infinitegrid/?ref=ivensliaoblog.com