4.7 KiB
title, icon, createTime, permalink
| title | icon | createTime | permalink |
|---|---|---|---|
| 瀑布流容器 | ri:layout-masonry-line | 2024/12/14 17:17:06 | /guide/components/card-masonry/ |
概述
瀑布流容器是一个 通用的容器组件，你可以把任何内容放到 <CardMasonry> 里面，容器会自动计算每一个 项 的高度，
然后将它们按照瀑布流的方式进行排列。
::: details 什么是项 ？
项 表示的是一个单独的内容，可以是图片、文字、视频等等。
- 从 markdown 的语法而言，独占一行的可以被认为是一个项。（该行的前后应该有空行）
- 从 html 的结构而言，容器下的每一个子元素都会被认为是一个项。
:::
<CardMasonry>
<img src="..." alt="...">
<!-- 更多内容 -->
</CardMasonry>
Props
:::: field-group
::: field name="cols" type="number | { sm: number, md: number, lg: number }" optional 列数。
组件默认会根据屏幕宽度自动调整列数。在空间足够时，默认显示三列，小屏幕下显示双列。
你可以通过 cols 配置列数。当传入 number 时，所有尺寸均显示为 number 个卡片。
传入 { sm: number, md: number, lg: number } 时，根据屏幕宽度自动调整列数。
sm:< 640pxmd:>= 640px < 960pxlg:>= 960px:::
::: field name="gap" type="number" optional default="16" 列之间的间距。 :::
::::
Markdown 语法支持
在 markdown 中，可以使用 ::: card-masonry 容器代替 <CardMasonry>。
::: card-masonry cols="3" gap="16" <!-- [!code hl]-->
<!-- 更多内容 -->
::: <!-- [!code hl]-->
示例
图片瀑布流
瀑布流特别适合用于展示图片，你可以直接在将  写到 ::: card-masonry 中。
输入：
::: 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
::: 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!");
}
```
:::
输出：
:::card-masonry
const a = 1
{
"name": "John"
}
p {
color: red;
}
<html>
<body>
<h1>Hello world</h1>
</body>
</html>
const a = 12
const b = 1
fn main() {
println!("Hello, world!");
}
:::