在前端开发中，经常会遇到需要实现瀑布流布局的需求。而 masonry-layout 就是一个能够帮助我们实现瀑布流布局的 npm 包。在本文中，我们将重点介绍 masonry-layout 的使用教程。
安装
你可以通过以下命令来安装 masonry-layout：
npm install masonry-layout
或者
yarn add masonry-layout
初始化
安装完成后，我们需要在项目中引入 masonry-layout 并进行初始化。
引入
我们需要在 HTML 中引入 masonry-layout 的脚本文件，并创建一个容器，用于承载瀑布流布局的元素。
-- -------------------- ---- ------- ---- -- -------------- --- ------- ------------------------------------------- ---- ---- --- ---- ------------- ---- -------- --- ---- ------------------------ ---- ------------------------ ---- ------------------------ --- ------
初始化
在引入脚本文件后，我们需要在 JavaScript 中对 masonry-layout 进行初始化。
import Masonry from 'masonry-layout';
// 初始化
const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
// 选项
itemSelector: '.grid-item'
});这里的 itemSelector 选项表示瀑布流布局中每个元素所使用的 CSS 选择器。
配置项
我们在初始化的时候可以传递一些配置项，以满足我们不同的需求。
itemSelector
itemSelector 选项表示瀑布流布局中每个元素所使用的 CSS 选择器，该选项必须要传递。
new Masonry('.grid', {
itemSelector: '.grid-item'
});columnWidth
columnWidth 选项表示瀑布流布局中每一列所占用的宽度，可以是一个数值或者一个选择器。
new Masonry('.grid', {
itemSelector: '.grid-item',
columnWidth: 200
});new Masonry('.grid', {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer'
});gutter
gutter 选项表示瀑布流布局中每个元素之间的间距，默认为 0。
new Masonry('.grid', {
itemSelector: '.grid-item',
gutter: 20
});percentPosition
percentPosition 选项表示瀑布流布局中元素的定位方式，为 true 时按百分比定位，为 false 时按像素定位。默认为 false。
new Masonry('.grid', {
itemSelector: '.grid-item',
percentPosition: true
});transitionDuration
transitionDuration 选项表示瀑布流布局中元素的过渡时长，默认为 0。
new Masonry('.grid', {
itemSelector: '.grid-item',
transitionDuration: '0.5s'
});方法
在初始化完成后，我们可以调用 masonry-layout 的一些方法。
addItems
addItems 方法可以用于添加新的元素到瀑布流布局中。这里需要注意的是，添加新的元素后，我们需要调用 layout 方法重新进行布局。
const newElems = document.querySelectorAll('.new-items');
masonry.addItems(newElems);
masonry.layout();remove
remove 方法可以用于移除瀑布流布局中的元素。同样需要调用 layout 方法重新进行布局。
const elem = document.querySelector('.grid-item');
masonry.remove(elem);
masonry.layout();layout
layout 方法可以用于重新进行布局。该方法执行完后，瀑布流布局中的元素才会按照新的位置进行渲染。
masonry.layout();
总结
到这里，你已经可以熟练使用 masonry-layout 了。不过，在使用过程中，不同的项目和需求会有不同的优化方案，建议多查看 masonry-layout 官方文档并结合实际项目进行调整。让我们来看一下完整的示例代码。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ------------
-------
----- -
-------- -----
---------- -----
------- - -----
------ ------
-
---------- -
------ ------
-------------- -----
-
--------
-------
------
---- -- -------------- ---
------- -------------------------------------------
---- ---- ---
---- -------------
---- ---------------------- ----------------------------------- -------------
---- ---------------------- ----------------------------------- -------------
---- ---------------------- ----------------------------------- -------------
---- ---------------------- ----------------------------------- -------------
---- ---------------------- ----------------------------------- -------------
---- ---------------------- ----------------------------------- -------------
------
---- --- ---
--------
----- ---- - --------------------------------
----- ------- - --- ------------- -
------------- -------------
------------ ----
------- ---
---------------- ----
---
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63569