# @appnest/masonry-layout 中文文档
规范地址：https://npmcn.com/package/%40appnest/masonry-layout/
版本：2\.2\.3
npm 元数据更新时间：2023-09-29T12:07:11.994Z
中文译文更新时间：2026-11-06T11:55:43.350Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40appnest/masonry-layout
原文对照：https://npmcn.com/package/%40appnest/masonry-layout/?lang=original
项目主页：https://github.com/andreasbm/masonry-layout#readme
源码仓库：https://github.com/andreasbm/masonry-layout
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：44.2 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-01-26T17:33:06.436Z
- 最新版本发布：2023-09-29T12:07:11.794Z
- 近 30 天下载量：10221（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 0 个）
## 中文简介
一个高效而快的网络组件,可以给你一个美丽的砖瓦布局
## 安装
```sh
npm install @appnest/masonry-layout
```
也可以使用：`pnpm add @appnest/masonry-layout`、`yarn add @appnest/masonry-layout`、`bun add @appnest/masonry-layout`
## README
# @ appnest/ masonry- layout (英语)
[](https://npmcharts.com/compare/@appnest/masonry-layout?minimal=true) [](https://www.npmjs.com/package/@appnest/masonry-layout) [](https://david-dm.org/andreasbm/masonry-layout) [](https://github.com/andreasbm/masonry-layout/graphs/contributors) [](https://www.webcomponents.org/element/@appnest/masonry-layout)
**一个高效而快的网络组件,可以给你一个美丽的砖瓦布局**
来这里看演示 [https://appnest-demo.firebaseapp.com/masonry-layout 页面存档备份,存于互联网档案馆](https://appnest-demo.firebaseapp.com/masonry-layout)。 。 。 .
- **简单 :** 在盒子里工作(加入你的标记)
- **轻量级:** 超小(1kb 微调和gziped)
- **零依赖性 :** 创建时只使用 vanilla js - 没有依赖性和框架不可知性 !
- **自定义 :** 几乎可以自定义一切(如列,过渡,间隙).
- **方便用户 :** 在添加网格大小变化或新元素时自动重新分配项目
- **表演者:** 高效快 - 牢记性能的构建( F)
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-installation)
## \* 安装
```javascript
npm i @appnest/masonry-layout
```
如果你喜欢使用 `umd` 捆绑可以装入 `https://unpkg.com/@appnest/masonry-layout/umd/masonry-layout.min.js` 换句话说.
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-example)
## 示例
导入 `@appnest/masonry-layout` 在你的代码中某个地方 你准备去! 简单添加 `masonry-layout` 元素为您的 `html` 然后在开始和关闭标记之间添加您的元素.
```html
1
2
3
4
5
```
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-customize)
## QQ 自定义
通过应用属性自定义功能.
### 列数
这个 `cols` 属性指定列的数量。 默认值为 `auto` 它确保根据可用的宽度分配元素.
```html
...
```
### 列和行之间的间隔
这个 `gap` 属性指定元素间相差的像素。 默认值为 `24px`。 。 。 .
```html
...
```
### 最大列宽度
这个 `maxcolwidth` 指定一个列的最大像素数,当 `cols` 属性设置为 `auto`。默认值是 `400px`。 。 。 .
```html
...
```
### 更改卸出时间
这个 `debounce` 属性指定了以 ms 为单位的时间量,布局的回流每次在瓦砾布局的大小变化时会解除。 这种回流被解开,以避免排版算法被连续引用过多次. 默认值为 `300ms`。 。 。 .
```html
...
```
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-trigger-layout)
## • 触发布局
如果你想强迫布局可以调用 `layout()` 函数.
```js
document.querySelector("masonry-layout").layout();
```
如果您想要解开布局, 您可以使用 `scheduleLayout()` 函数代替.
```js
document.querySelector("masonry-layout").scheduleLayout();
```
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-overview)
## \* 概览
以下是元素的完整概述.
### 砖瓦铺设
共济会布局网页组件. 它把时间档元素置于最佳位置 在现有的垂直空间上, 就像泥瓦匠在墙上装了石头.
#### 示例
```html
```
#### 属性
| 财产 | 属性 | 类型 | 说明 |
| --- | --- | --- | --- |
| `cols` | `cols` | `number | "auto"` | 柱数. |
| `debounce` | `debounce` | `number` | 元素调整大小时的去弹出分数. |
| `gap` | `gap` | `number` | 列之间的像素差距. |
| `layout` | | | |
| `maxColWidth` | `maxcolwidth` | `number` | 每个列的最大宽度, 如果设置为自动 . |
| `onResize` | | | |
| `onSlotChange` | | | |
#### 方法
| 方法 | 类型 | 说明 |
| --- | --- | --- |
| `layout` | `(): void` | 排列元素. |
| `onResize` | `(entries?: object | undefined): void` | 每次元素大小调整,我们需要安排一个布局
如果可用列的数量已经改变. |
| `onSlotChange` | `(): void` | |
| `renderCols` | `(colCount: number): void` | 折射出 X 个数列 . |
| `scheduleLayout` | `(ms?: number): void` | 计划布局. |
#### 槽数
| 名称 | 说明 |
| --- | --- |
| | 应当以布局分配的项目. |
#### CSS 阴影部件
| 编 | 说明 |
| --- | --- |
| `column` | 石器布局每栏. |
| `column-index` | 给定索引中的特定一栏(例如一栏-0将针对一栏等) |
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-support-for-old-browsers)
## QQ 支持旧浏览器
如果您要支持不支持的更老浏览器 [自定义元素](https://caniuse.com/#search=Custom%20Elements), (中文(简体) ), [阴影多姆](https://caniuse.com/#search=shadow%20root) 或者说 [调整观察员的大小](https://caniuse.com/#search=resize%20observer) 您应该填充功能。 通过使用 [精彩的花花公子服务](https://github.com/wessberg/polyfiller)。可以在代码一行中添加以下内容: `index.html` 在导入前 `masonry-layout`。 。 。 .
```html
```
[](https://npmcn.com/package/%40appnest/masonry-layout/#readme-license)
## 许可证
许可证根据 [麻省理工学院](https://opensource.org/licenses/MIT)。 。 。 .
## 常见问题
### @appnest/masonry-layout 是什么？
一个高效而快的网络组件,可以给你一个美丽的砖瓦布局
### 如何安装 @appnest/masonry-layout？
在项目目录运行 npm install @appnest/masonry-layout，或使用 pnpm add / yarn add / bun add。
### @appnest/masonry-layout 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @appnest/masonry-layout 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @appnest/masonry-layout 可以商用吗？
@appnest/masonry-layout 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @appnest/masonry-layout 的下载量有多少？
根据 npm 官方下载统计，@appnest/masonry-layout 在 2026/10/07 – 2026/11/05 这 30 天内被下载 10,221 次，日均约 341 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @appnest/masonry-layout 还在维护吗？
最新版本 2\.2\.3 发布于 2023/09/29（3 年前）；至今共发布 31 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/01/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。