Masonry 瀑布流
Masonry 是一个偏布局层的 Rue Design 组件。它不强绑定任何卡片视觉，而是把不同高度的内容块 组织成更紧凑的瀑布流；同时把固定列数、响应式列数、基于最小列宽的 auto-fit，以及 items / renderItem 这几条常见使用路径一次覆盖。
何时使用
- 内容块高度明显不一致，用 Grid 会留下大面积空白时。
- 你已经有自己的 card、report、gallery 视觉，只缺一个轻量的瀑布流容器时。
- 需要在固定列数和自适应列宽之间切换，又不想引入额外的布局依赖时。
推荐用法
# Basic wall
最直接的 children 模式：Masonry 只负责排版，不接管卡片视觉。
Signal Board
把埋点回放、增长假设和异常备注放进同一列，标题与摘要长度刻意不一致，用来观察瀑布流的自然落差。
Runtime Pulse
一张偏技术的摘要卡，正文略长，底部再追加多条 bullet，让卡片高度明显拉开。
Studio Drop
适合短摘要和强视觉占位混排，卡片头部只放一个色块也能形成节奏。
Incident Brief
瀑布流常见场景不是图库，而是高度不一的告警、复盘和工作说明。Rue 的 Masonry 更偏这种信息块容器。
Release Wall
内容块越不整齐，越能看出 Masonry 比 Grid 更适合摘要墙和编辑墙。
Watch List
再放一张偏短的卡，强调不同高度内容的落位差。
Field Notes
当卡片里基础长文本，也有标签和列表时，瀑布流比等高行列更省空间。
Launch Kit
最后一张带按钮的卡片，用来确认操作区和内容区混排时不会把列宽撑坏。
# Responsive columns
columns 和 gap 都支持断点对象，适合从移动端单列一路放大到桌面端多列。
Signal Board
把埋点回放、增长假设和异常备注放进同一列，标题与摘要长度刻意不一致，用来观察瀑布流的自然落差。
Runtime Pulse
一张偏技术的摘要卡，正文略长，底部再追加多条 bullet，让卡片高度明显拉开。
Studio Drop
适合短摘要和强视觉占位混排，卡片头部只放一个色块也能形成节奏。
Incident Brief
瀑布流常见场景不是图库，而是高度不一的告警、复盘和工作说明。Rue 的 Masonry 更偏这种信息块容器。
Release Wall
内容块越不整齐，越能看出 Masonry 比 Grid 更适合摘要墙和编辑墙。
Watch List
再放一张偏短的卡，强调不同高度内容的落位差。
# Auto fit width
minColumnWidth 让 Masonry 根据容器宽度自动推导列数，更适合未知容器宽度的内容墙。
Signal Board
把埋点回放、增长假设和异常备注放进同一列，标题与摘要长度刻意不一致，用来观察瀑布流的自然落差。
Runtime Pulse
一张偏技术的摘要卡，正文略长，底部再追加多条 bullet，让卡片高度明显拉开。
Studio Drop
适合短摘要和强视觉占位混排，卡片头部只放一个色块也能形成节奏。
Incident Brief
瀑布流常见场景不是图库，而是高度不一的告警、复盘和工作说明。Rue 的 Masonry 更偏这种信息块容器。
Release Wall
内容块越不整齐，越能看出 Masonry 比 Grid 更适合摘要墙和编辑墙。
Watch List
再放一张偏短的卡，强调不同高度内容的落位差。
Field Notes
当卡片里基础长文本，也有标签和列表时，瀑布流比等高行列更省空间。
Launch Kit
最后一张带按钮的卡片，用来确认操作区和内容区混排时不会把列宽撑坏。
# Items and renderItem
数据驱动模式适合 release wall、活动 feed 和任何现成列表数据的摘要面板。
Render Anchor Cleanup
替换空 renderable 时先走 clear 路径，避免 beforeUnmount / cleanup 漏掉。
Sidebar Navigation Pass
把设计站条目补充到 layout 分组，减少新组件只能靠手敲 hash 路径访问的问题。
Vapor Size Window
记录体积快照和降幅来源，方便 release note 直接复用。
Docs Alignment
统一设计页 API 表述，避免同一能力在不同组件里叫法漂移。
Compat Probe
把浏览器态探针补到最小样例，降低只靠 jsdom 误判的概率。
# Custom item shell
itemAs、itemClassName 和 itemStyle 让包装层也能参与语义和视觉控制。
Ops Handoff
值班手册、升级路径和短周期回归清单适合做成语义化 article 项。
Design Crit Pack
设计评审素材通常有不同长度的注解，放在 Masonry 里比等高卡片更省空间。
Release Template
把 changelog、tweet 和站内更新一次打包，常常是一张中等高度的流程卡。
Migration Note
说明文档往往正文偏长，很适合放在 pinned 卡旁边形成高低错落。
# Empty fallback
empty 用来承接无数据状态，避免页面自己额外判断一层 if。
数据回来后会自动切回瀑布流，不需要再包一层条件渲染容器。
API
Masonry 的设计目标是做一个足够轻的布局容器：它只关心列数、间距和 item wrapper，卡片视觉、交互和业务内容继续交给你现成的 Rue 组件或业务样式。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
as | 指定根节点标签或组件，适合 section、main、aside 等语义容器。 | any | `div` |
columns | 显式指定列数，支持响应式断点对象。 | number | Partial<Record<Breakpoint, number>> | - |
gap / gutter | 统一设置列间距和行间距，支持单值、[columnGap, rowGap] 和响应式值。 | MasonryGap | `16px` |
columnGap / rowGap | 分别覆盖列间距和行间距，优先级高于 gap / gutter。 | MasonrySpace | ResponsiveValue<MasonrySpace> | - |
minColumnWidth | 根据容器宽度自动推导列数，适合内容墙和自适应卡片流。 | MasonrySpace | ResponsiveValue<MasonrySpace> | - |
minColumns / maxColumns | 给 auto-fit 模式加上下限和上限，避免超宽屏列数失控。 | number | ResponsiveValue<number> | - |
items / renderItem / itemKey | 数据驱动模式；itemKey 可传字段名或函数，renderItem 负责渲染每个卡片内容。 | T[] / (item, index) => any / keyof T | ((item, index) => string | number) | - |
itemAs | 指定每个子项包装层的标签或组件。 | any | `div` |
itemClassName / itemStyle | 给每个瀑布项补类名和内联样式，也支持按 item 动态生成。 | string | ((item, index) => string) / Record<string, any> | ((item, index) => Record<string, any>) | - |
empty | children 和 items 都为空时的兜底内容。 | any | - |
className / style | 根容器样式扩展，可以使用 Rue 一贯的类名直连方式。 | string / Record<string, any> | - |