@zhaomushan/waterfall

Vue 3 **瀑布流（Masonry）**布局：Waterfall + WaterfallItem，支持固定列数或按最小列宽自适应。

安装

npm install @zhaomushan/waterfall vue

使用

<script setup lang="ts">
import { Waterfall, WaterfallItem } from "@zhaomushan/waterfall";
import "@zhaomushan/waterfall/style.css";

const cards = [
  { id: 1, h: 120, title: "A" },
  { id: 2, h: 200, title: "B" },
];
</script>

<template>
  <Waterfall :min-column-width="200" :gap="12">
    <WaterfallItem v-for="c in cards" :key="c.id">
      <div class="card" :style="{ minHeight: c.h + 'px' }">{{ c.title }}</div>
    </WaterfallItem>
  </Waterfall>
</template>

Props（Waterfall）

| 属性 | 说明 | 默认 | |------|------|------| | columns | 固定列数；0 表示自适应 | 0 | | gap | 间距（px） | 12 | | minColumnWidth | 自适应时的最小列宽（px） | 220 |

本地预览

在 monorepo 根目录：

npm install
npm run dev

左侧目录 UI 动效 → 瀑布流，或访问 /demo/waterfall。

发布

npm run build
npm publish --access public