@zhaomushan/waterfall

@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）

本地预览

在 monorepo 根目录：

npm install
npm run dev

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

发布

npm run build
npm publish --access public