Masonry 瀑布流
按列分布、高度自适应的多列布局。卡片墙、画廊、动态列表的常见排版方式。
基本使用
设置 columns(列数)和 gutter(间距),把任意子节点放进默认插槽。
响应式列数
columns 也可以传断点对象,Masonry 会按当前视口宽度选择对应列数。
控制水平 / 垂直间距
gutter 可传单值(同时控制 H/V)或 [h, v] 数组分别指定。
卡片墙
把 <c-card> 放进 Masonry,立刻得到卡片瀑布流。
内容动态变化
Masonry 在子节点变化时会重新分列,方便做"加载更多"。
API
Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| columns | number | { xs?, sm?, md?, lg?, xl?, xxl?: number } | 3 | 列数;对象形式按断点响应 |
| gutter | number | [number, number] | 16 | 间距:单值 = H/V 同;数组 = [水平, 垂直] |
| sequential | boolean | false | 顺序填充(保持原序,不做高度平衡) |
断点对照(与 c-grid 一致)
| 断点 | 触发宽度(px) |
|---|---|
| xs | 0 |
| sm | 576 |
| md | 768 |
| lg | 992 |
| xl | 1200 |
| xxl | 1600 |