Skip to content

Masonry 瀑布流

按列分布、高度自适应的多列布局。卡片墙、画廊、动态列表的常见排版方式。

基本使用

设置 columns(列数)和 gutter(间距),把任意子节点放进默认插槽。

响应式列数

columns 也可以传断点对象,Masonry 会按当前视口宽度选择对应列数。

控制水平 / 垂直间距

gutter 可传单值(同时控制 H/V)或 [h, v] 数组分别指定。

卡片墙

<c-card> 放进 Masonry,立刻得到卡片瀑布流。

内容动态变化

Masonry 在子节点变化时会重新分列,方便做"加载更多"。

API

Props

参数类型默认值说明
columnsnumber | { xs?, sm?, md?, lg?, xl?, xxl?: number }3列数;对象形式按断点响应
gutternumber | [number, number]16间距:单值 = H/V 同;数组 = [水平, 垂直]
sequentialbooleanfalse顺序填充(保持原序,不做高度平衡)

断点对照(与 c-grid 一致)

断点触发宽度(px)
xs0
sm576
md768
lg992
xl1200
xxl1600

Released under the MIT License.