Skip to content

Masonry 瀑布流

基于 CSS columns 的瀑布流布局容器,子项自动均分到各列且不被拆分。

基础用法

四列瀑布流

短卡片

这是一段比较高的内容,用于演示瀑布流下不同高度的卡片如何错落排布,这里再补几行文字撑高卡片。

第二段文字。

中等高度

附加说明。

又一短卡片

高一点的卡片,包含多行描述文字与列表。

  • 要点一
  • 要点二

普通卡片

最后一列示例。

列数与间距

三列、加大间距

内容 A

内容 B,高度不一时瀑布流自动补位。

内容 C

内容 D

无子项

空容器

无子项时不报错,正常渲染空容器。

API

属性

属性说明类型默认值
columns列数;非法值(非正整数/小数/0/负数)回退 1
gap列间距(px);非法值回退默认

插槽

名称说明
默认瀑布流子项,子项自动 break-inside: avoid

部件:::part(masonry) 瀑布流容器。