Waterfall 瀑布流

用于电商商品流、社区图文笔记、照片墙的多列参差瀑布流布局，采用贪心算法实现自动最短列插值平衡，防止左右两列高度极度不均。

---

代码示例

1. 基础动态瀑布流 (Basic Waterfall)

通过 data 传入瀑布流数据列表。每个数据项包含 title、image、price、badge、tags 等属性。

<template>
  <mu-waterfall :data="goodsList" @click="onItemClick" />
</template>

<script setup>
import { ref } from 'vue'

const goodsList = ref([
  {
    id: 1,
    title: '全端极奢视效设计系统 MuZhiYu UI 1.0 发布',
    image: 'https://picsum.photos/300/420',
    price: '299',
    originalPrice: '399',
    badge: 'HOT',
    tag: '视觉推荐',
    likes: 1280
  },
  {
    id: 2,
    title: 'VisionOS 空间拟态交互组件库研讨会',
    image: 'https://picsum.photos/300/280',
    price: '199',
    tag: '热销中',
    likes: 954
  }
])

const onItemClick = ({ item }) => {
  console.log('点击商品:', item.title)
}
</script>

---

2. 3 列网格与自定义插槽 (Custom Slot)

设置 columns="3" 调整为 3 列瀑布流，也可通过作用域插槽自定义内部 DOM。

<template>
  <mu-waterfall :data="photoList" :columns="3">
    <template #default="{ item }">
      <view class="custom-card">
        <image :src="item.image" mode="widthFix" class="custom-img" />
        <text class="custom-title">{{ item.title }}</text>
      </view>
    </template>
  </mu-waterfall>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
data	瀑布流数据源列表	Array	-	[]
columns	瀑布流分栏列数	Number | String	-	2
gap	列与列/项与项之间的间距 (rpx)	Number | String	-	16
radius	瀑布流卡片圆角 (rpx)	Number | String	-	20

---

插槽说明 (Slots)

插槽名	说明	作用域参数
default	自定义单个瀑布流卡片项	{ item: Object, index: Number, column: Number }

---

事件说明 (Events)

事件名	说明	回调参数
click	点击某个瀑布流卡片时触发	({ item: Object, index: Number })