• ? Github Star: 16.3K^[1]

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

1、Masonry 是什么？

Masonry 是一個開源 JavaScript 庫，允許創(chuàng)建響應式的、瀑布流樣式的網(wǎng)格布局。特別適合圖片畫廊和其他需要動態(tài)調(diào)整大小和排列的元素。Masonry 通過檢測每個元素的寬度，然后計算它們在網(wǎng)格中的最佳位置，實現(xiàn)視覺上的整齊排列。

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

關鍵特性

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

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

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

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

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

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

2、快速開始

1、引入庫文件

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

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

2、準備容器和元素

接下來，需要創(chuàng)建一個容器元素，并在容器中添加需要的瀑布流元素，設置合適的 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ù)初始化，傳入容器元素選擇器和配置選項。

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

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

4、效果展示

3、核心功能

1、常用配置選項 Options

Masonry 提供多種配置選項來定制布局的行為和外觀。一些常用的配置選項及其作用：

• ? itemSelector: 指定 Masonry 布局中每個項目的選擇器。

• ? columnWidth: 指定列的寬度。

• ? gutter: 指定項目之間的間隙。

• ? transitionDuration: 指定布局動畫的持續(xù)時間。

• ? percentPosition: 使用百分比來定位項目，以便在動畫過程中保持正確的位置。

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

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

• ? fitWidth: 是否使布局的寬度適應其容器的寬度。

2、常用方法 Methods

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

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

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

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

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

• ? .prepended(elem): 當在布局開始處添加新項目時調(diào)用。

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

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

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

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

4、同類型庫

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

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

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

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

  

5、總結

Masonry 以其簡潔的 API 和強大的布局能力，是否可以成為你實現(xiàn)瀑布流布局的備選工具呢？希望通過本文學習了解 Masonry 基本用法，在需要時能夠想起來這個項目。

祝好！

引用鏈接

[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