Masonry 瀑布流布局

RenderMasonryPanel 用固定列数排列不同高度的卡片，每个新卡片放入当前最短列。它适合仪表盘卡片、图片墙和高度不一致的信息块。

LIVE CANVAS可运行组件示例

ON-DEMAND RUNTIME交互式示例将在进入视区时启动避免文档首屏同时初始化多个 Canvas Runtime

API 总览

import {  RenderMasonryPanel,  RenderScrollViewer,  RenderText,  type MasonryHorizontalAlignment,} from 'ds-ui'

API	类型	用途
`RenderMasonryPanel`	class	固定列数瀑布流布局，把新子节点放入当前最短列。
`MasonryHorizontalAlignment`	type	子节点在列内的水平对齐方式。
`RenderScrollViewer`	class	可选外层滚动容器，向 Masonry 同步可视区域以跳过不可见绘制。

最小装配顺序是：创建 RenderMasonryPanel({ columnCount, columnGap, rowGap })，添加卡片子节点；需要滚动时包一层纵向 RenderScrollViewer。

基本用法

const masonry = new RenderMasonryPanel({  columnCount: 3,  columnGap: 12,  rowGap: 12,}) masonry.addChild(new RenderText('卡片 A'))masonry.addChild(new RenderText('卡片 B'))masonry.addChild(new RenderText('卡片 C'))

对齐方式

面板的 itemHorizontalAlignment 控制所有未显式声明水平 alignment 的子节点在列内如何放置；子节点自身的 horizontalAlignment 优先：

stretch：拉伸到列宽，默认值。
start：靠左。
center：居中。
end：靠右。

滚动性能

RenderMasonryPanel 实现了滚动视口客户端接口。放入 RenderScrollViewer 后，绘制阶段会根据可视区域跳过不可见子节点。

const masonry = new RenderMasonryPanel({  columnCount: 3,  columnGap: 12,  rowGap: 12,}) const scroll = new RenderScrollViewer({  direction: 'vertical',  child: masonry,})

这只优化绘制，不代表布局阶段可以承载无限数据。超大数据量仍然应使用虚拟化数据组件。

使用建议

卡片数量中等、卡片高度差异明显时使用 Masonry。
需要严格行列对齐时使用 GridPanel 或 AdaptiveGridPanel。
响应式列数可以在外部根据容器宽度调整 columnCount，或者使用 AdaptiveGridPanel。

MasonryPanel

可运行示例与完整源码。