瀑布流容器
概述
瀑布流容器是一个通用的容器组件，你可以把任何内容放到 <CardMasonry> 里面，容器会自动计算每一个 项 的高度， 然后将它们按照瀑布流的方式进行排列。
什么是项 ？
项表示的是一个单独的内容，可以是图片、文字、视频等等。
- 从 markdown 的语法而言，独占一行的可以被认为是一个项。（该行的前后应该有空行）
- 从 html 的结构而言，容器下的每一个子元素都会被认为是一个项。
<CardMasonry>
<img src="..." alt="...">
<!-- 更多内容 -->
</CardMasonry>Props
列数。
组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示三列，小屏幕下显示双列。
你可以通过 cols 配置列数。当传入 number 时，所有尺寸均显示为 number 个卡片。 传入对象时，根据屏幕宽度自动调整列数（三个键均可选，未提供时按 lg → 3、md → 2、sm → 2 回退）。
sm:< 640pxmd:>= 640px < 960pxlg:>= 960px
列之间的间距。
Slots
default
瀑布流通过 default 插槽接收子卡片。与 CardGrid 不同的是：组件会按高度自动把子元素分配到各列，无需你手动分列。
<CardMasonry :cols="3">
<ImageCard v-for="item in photos" :key="item.src" v-bind="item" />
</CardMasonry>子元素会被重新分配到各列
组件采用按高度贪心的分列策略：依次测量每个子元素的高度，并把它放入当前累计高度最小的一列。
因此子元素的顺序不等于视觉上的阅读顺序（第 1、2、3 个元素未必分别落在第 1、2、3 列）。
若你需要严格的阅读顺序，请改用 CardGrid，它保持 DOM 顺序。
仅在客户端渲染
瀑布流需要测量元素高度以计算分列，因此组件被包裹在 ClientOnly 中，SSR 阶段不渲染。这会影响首屏 HTML 中该区域的内容，请勿将关键内容只放在其中。
Markdown 语法支持
在 markdown 中，可以使用 ::: card-masonry 容器代替 <CardMasonry>。
::: card-masonry cols="3" gap="16"
<!-- 更多内容 -->
::: 示例
图片瀑布流
瀑布流特别适合用于展示图片，你可以直接在将  写到 ::: card-masonry 中。
输入：
::: card-masonry
:::输出：
卡片瀑布流
瀑布流也适合用于展示卡片，你可以直接在将 ::: card 写到 ::: card-masonry 中。
输入：
:::: card-masonry
::: card title="卡片1"
卡片内容
:::
::: card title="卡片2"
卡片内容
卡片内容
:::
::: card title="卡片3"
卡片内容
:::
::: card title="卡片4"
卡片内容
:::
::: card title="卡片5"
卡片内容
卡片内容
:::
::: card title="卡片6"
卡片内容
:::
::::输出：
代码块瀑布流
输入：
:::card-masonry
```ts
const a = 1
```
```json
{
"name": "John"
}
```
```css
p {
color: red;
}
```
```html
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
```
```ts
const a = 12
const b = 1
```
```rust
fn main() {
println!("Hello, world!");
}
```
:::输出：
