Masonry

Masonry

用 Masonry 构建瀑布流网格布局Masonry 是一个 JavaScript 网格布局库,会根据可用的垂直空间为子元素安排最佳位置,适合构建不规则高度的瀑布流内容网格。文档提供安装、CSS 尺寸设置、jQuery、原生 JavaScript 和 HTML 初始化示例。

Masonry 页面快照
3
初始化方式:jQuery、原生 JavaScript、HTML
2
包管理器安装方式:Bower 与 npm
4
文档对应的 Masonry 主版本
核心能力

从安装到布局控制的完整使用指南

围绕 Masonry 的安装方式、网格结构、初始化方法和布局控制文档,快速完成瀑布流网格的集成。

瀑布流网格排布

根据可用垂直空间,将网格子元素放置在最佳位置,形成不规则高度的瀑布流布局。

多种安装方式

支持下载压缩或未压缩的 Masonry 文件,也可通过 unpkg CDN、Bower 或 npm 安装。

原生 JavaScript 初始化

通过 Masonry 构造函数传入容器元素和配置对象初始化布局,也支持使用选择器字符串指定容器。

jQuery 插件初始化

可将 Masonry 作为 jQuery 插件使用,并在初始化时设置 itemSelector、columnWidth 等选项。

HTML 声明式初始化

通过容器元素上的 data-masonry 属性配置选项,无需额外编写初始化 JavaScript。

官方资料

文档、源码与安装资源

通过官方文档查看布局、选项、方法、事件和常见问题,并获取压缩文件、源码仓库与包管理器安装入口。

Masonry

从这里开始使用Masonry。