Masonry 瀑布流
基于 CSS columns 的瀑布流布局容器,子项自动均分到各列且不被拆分。
基础用法
四列瀑布流
短卡片
这是一段比较高的内容,用于演示瀑布流下不同高度的卡片如何错落排布,这里再补几行文字撑高卡片。
第二段文字。
中等高度
附加说明。
又一短卡片
高一点的卡片,包含多行描述文字与列表。
- 要点一
- 要点二
普通卡片
最后一列示例。
列数与间距
三列、加大间距
内容 A
内容 B,高度不一时瀑布流自动补位。
内容 C
内容 D
无子项
空容器
无子项时不报错,正常渲染空容器。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columns | 列数;非法值(非正整数/小数/0/负数)回退 1 | — | — |
gap | 列间距(px);非法值回退默认 | — | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | 瀑布流子项,子项自动 break-inside: avoid |
部件:::part(masonry) 瀑布流容器。