Waterfall 瀑布流

EvWaterfall 多列瀑布流：条目按「最短列优先」分发，列高随内容比例自动均衡。 与 ImageWall 图片墙 的分工——ImageWall 是统一画幅的均匀网格， Waterfall 让每张图保持自己的高宽比，错落排布。 默认渲染图片卡，点击打开 ImagePreview 图片预览 灯箱（可关）； #item 作用插槽可完全接管单元格，实现任意内容的瀑布流。

基础用法

错落排布，点击预览

未声明比例的图片先按占位画幅排布，加载完成后按真实比例重新归位；点击任意一张打开灯箱。

<script setup>
const photos = [
  { src: '/images/ridge.jpg', alt: '山脊线' },
  { src: '/images/mist.jpg', alt: '雾中山林' },
  { src: '/images/forest.jpg', alt: '林间光', caption: '林间光' },
]
</script>

<template>
  <EvWaterfall :items="photos" :columns="3" />
</template>

列数与间距

切换列数

columns 改变后按同一套最短列策略重新分发；gap 同时控制列距与行距。

<EvWaterfall :items="photos" :columns="4" :gap="10" :radius="8" />

标题蒙层与声明比例

caption 蒙层 + ratio 声明

caption 在图片底部生成渐变蒙层；条目声明 ratio（高/宽）或 width/height 后跳过占位，首屏即按真实比例排布。

<EvWaterfall
  :items="[
    { src: '/images/ridge.jpg', caption: '山脊线', ratio: 1.25 },
    { src: '/images/field.jpg', caption: '原野', ratio: 0.56 },
  ]"
/>

自定义内容瀑布流

#item 插槽接管单元格

插槽参数为 { item, index }；承载笔记卡片这类高度不一的内容流，点击行为由内容自己决定。

把首屏交给一张图

大图定调，文字退后。高度不一的素材按真实比例落位，列与列自动找平。

09:20

内容也适用

卡片、笔记、摘要，任何高度不一的内容流都能用 #item 插槽接管。

13:18

错落，而不是对齐

统一的 4:3 网格适合产品列表；风景、长图、竖版海报各有各的形状，瀑布流让它们都保持原样。

10:05

加载后自动归位

未声明比例的图片先按占位画幅排布，真实尺寸到位后整体重排一次。

15:00

最短列优先

新条目总是落进当前最矮的一列，加载多少就补多少。

11:42

<EvWaterfall :items="notes" :columns="3" :preview="false">
  <template #item="{ item }">
    <article class="note">
      <h3>{{ item.title }}</h3>
      <p>{{ item.text }}</p>
    </article>
  </template>
</EvWaterfall>

API

Props

属性	说明	类型	默认值
items	条目列表：url 字符串或 { src, alt, caption, ratio, width, height }（ratio 为高/宽）	array	[]
columns	列数	number	3
gap	间距（px，列距与行距同值）	number	14
radius	圆角（px）	number	12
preview	点击打开预览灯箱	boolean	true

事件

事件	说明
select	点击图片时触发，参数为 (item, index)

插槽

插槽	说明
item	单元格内容，参数为 { item, index }；使用后不再渲染默认图片卡