type
status
date
slug
summary
tags
category
icon
password
前言
在网页设计中，当需要展示高度不一的内容块（如图库、文章卡片）时，传统的网格布局可能会留下难看的空白。Masonry.js 应运而生，它是一个广受欢迎的开源 JavaScript 库，专门用于创建智能、响应式的“瀑布流”或“砌墙式”网格布局，无论项目尺寸如何，都能呈现出色的视觉效果。
- GitHub 仓库: github.com/desandro/masonry
1. Masonry 是什么？
Masonry.js 的工作原理类似于砌砖的工匠：它智能地将每个元素（“砖块”）放置在网格列中下一个可用的垂直空间，从而最小化垂直间隙，形成紧凑且美观的布局。它特别适合需要动态调整大小和排列元素的场景。
核心特性:
- 智能瀑布流布局: 根据可用垂直空间自动定位元素，解决元素高度不一导致的问题。
- 响应式设计: 布局能够根据屏幕（或容器）尺寸的变化自动调整。
- 灵活列控制: 支持多列布局，并可精确控制列宽和间距（Gutter）。
- 排序选项: 可保持元素从左到右的原始顺序，或优先填充垂直空间。
- 性能优化: 支持渐进增强，并推荐与
imagesLoaded库配合使用，以处理图片加载延迟。
- 高度可定制: 提供丰富的配置选项、API 方法和事件，满足各种复杂的布局需求。
- 良好兼容性: 兼容现代桌面及移动端浏览器。
常见应用场景:
- 电商网站的商品列表展示。
- 图片分享平台（如 Pinterest 风格）的作品集。
- 博客文章摘要或社交媒体信息流。
- 在 React、Vue.js 或 Angular 应用中集成响应式网格。
2. 快速上手
将 Masonry.js 集成到你的项目中非常简单。
第一步：引入库文件
你可以通过 npm/yarn 包管理器安装，或使用 CDN 链接。
或者，在 HTML 中通过 CDN 引入：
(提示：对于包含图片的网格，强烈建议使用
imagesLoaded 库，以确保 Masonry 在图片完全加载、尺寸确定后再进行布局计算。)第二步：准备 HTML 结构
你需要一个容器元素来包裹你的网格项。
第三步：编写关键的 CSS 样式
Masonry 依赖 CSS 来确定项目的宽度和列宽。 这是布局能否正常工作的关键。
关键点： 确保你的
itemSelector（.grid-item） 和 columnWidth（可以通过 .grid-sizer 或直接指定） 定义了水平尺寸。Masonry 主要负责垂直方向的排列。第四步：使用 JavaScript 初始化 Masonry
第五步：查看效果
现在，你的
.grid-item 元素应该已经根据它们各自的高度和定义的列宽，智能地排列成一个紧凑的多列瀑布流布局了。(可在此处放置展示 Masonry 布局效果的图片或 GIF)
3. 核心 API：配置选项与方法
Masonry 提供了丰富的 API 来进行精细控制：
常用配置选项 (Options)
itemSelector(String): 必需。网格项元素的 CSS 选择器。
columnWidth(Number | String | Element): 必需。定义单列的宽度。可以是像素值、CSS 选择器（如.grid-sizer）或一个元素节点。对布局计算至关重要。
gutter(Number | String | Element): 列与列（或项与项）之间的水平间距。
percentPosition(Boolean): 当使用百分比定义列宽和项宽时，设为true可获得更好的性能和更平滑的动画效果。默认为false。
horizontalOrder(Boolean): 保持项目的原始水平顺序（从左到右）。默认为false（优先填充垂直空白）。
transitionDuration(String | 0): 项目位置改变时的动画时长 (如'0.4s')。设为0可禁用动画。默认为'0.4s'。
resize(Boolean): 窗口大小调整时是否自动重新布局。默认为true。
initLayout(Boolean): 初始化时是否立即执行首次布局。默认为true。
fitWidth(Boolean): 使容器宽度自适应，并水平居中。默认为false。
常用 API 方法 (
msnry.*)msnry.layout(): 手动触发对所有项目的重新布局。当项目尺寸改变后（如图片加载完成）非常有用。
msnry.reloadItems(): 重新计算所有项目的尺寸和位置，然后重新布局。
msnry.appended(elements): 将新元素（作为数组或 NodeList 传入）添加到布局末尾。适用于无限滚动加载。
msnry.prepended(elements): 将新元素添加到布局的开头。
msnry.remove(elements): 从布局中移除指定的元素。
msnry.on(eventName, listener): 绑定事件监听器 (如'layoutComplete','removeComplete')。
msnry.off(eventName, listener): 解绑事件监听器。
msnry.once(eventName, listener): 绑定一次性的事件监听器。
msnry.destroy(): 移除 Masonry 功能并清理相关状态。
4. 同类库对比与选择
虽然 Masonry 非常出色，但根据具体需求，也可以考虑其他方案：
- CSS Grid Layout / Flexbox: 现代 CSS 提供了强大的原生布局能力。对于简单的网格或需要精确行列对齐（非瀑布流）的场景，它们可能更合适。
- imagesLoaded: (同作者) 经常与 Masonry 配合使用，确保图片加载完成后再布局。
- Isotope: (同作者) 更高级的库，包含 Masonry 布局，并增加了强大的过滤和排序功能。
- React Masonry Component: 流行的 React 封装组件，方便在 React 项目中以声明式方式使用 Masonry。
- Waterfall.js: 一个轻量级、无依赖的纯 JS 库，用于创建简单的响应式瀑布流布局。
- Shuffle.js: 专注于带有流畅动画效果的网格项过滤、排序和搜索功能。
- InfiniteGrid: 支持多种网格类型（包括瀑布流），特别擅长高效处理无限滚动加载的内容。
(可在此处放置 InfiniteGrid 的效果图)
5. 总结
Masonry.js 凭借其简洁的 API 和强大的布局能力，仍然是实现动态、响应式瀑布流布局的可靠选择。它有效地解决了不同尺寸内容块的排列难题。如果你需要构建引人入胜的图库、作品集或内容流，Masonry.js 绝对值得你加入技术选型列表。
希望本文能帮助你了解 Masonry 的基本用法，并在需要时能快速上手！
引用链接
[1] GitHub 仓库: https://github.com/desandro/masonry[2] 官网: 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://vestride.github.io/Shuffle/ (官网/演示)
[6] InfiniteGrid: https://naver.github.io/egjs-infinitegrid/- 作者:90_blog
- 链接:https://blog.tri7e.com/article/css_masonry
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
