组件
瀑布流 Masonry
Masonry：瀑布流。条目先沿每列向下排列，再到下一列，因此顺序按列优先。按行排列需要 grid masonry，浏览器还没有实现。
#基础用法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup lang="ts">
import { Masonry } from "@bysages/vue";
// Uneven heights are the point — the wall reads column-first.
const heights = [5, 9, 4, 7, 11, 6, 9, 5, 8, 12, 6, 8, 4, 7];
</script>
<template>
<Masonry class="w-full">
<div
v-for="(height, index) in heights"
:key="index"
class="grid place-items-center border border-border bg-surface-3 text-sm text-secondary"
:style="{ blockSize: `${height}rem` }"
>
{{ index + 1 }}
</div>
</Masonry>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script setup lang="ts">
import { Masonry } from "@bysages/vue";
const heights = [5, 9, 4, 7, 11, 6, 9, 5, 8, 12, 6, 8, 4, 7];
const layouts = [2, 4];
</script>
<template>
<div class="grid w-full gap-6">
<Masonry v-for="columns in layouts" :key="columns" :columns="columns">
<div
v-for="(height, index) in heights"
:key="index"
class="grid place-items-center border border-border bg-surface-3 text-sm text-secondary"
:style="{ blockSize: `${height}rem` }"
>
{{ index + 1 }}
</div>
</Masonry>
</div>
</template>
#属性
#Masonry
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
columns | Number | 3 | — |
minColumn | String | undefined | — |
gap | String | "md" | — |