UniApp 实现瀑布流自定义多布局(支持图片、图文、视频等)

const dataList = [  { id: 1, type: 'image', url: 'https://xxx.jpg', height: 300 },  { id: 2, type: 'text-image', title: '标题', desc: '描述...', cover: 'https://yyy.jpg', height: 400 },  { id: 3, type: 'video', videoUrl: 'https://zzz.mp4', poster: 'https://poster.jpg', duration: 15, height: 500 }]

<template>  <viewclass="waterfall-container">    <viewclass="columns">      <viewclass="column"ref="leftColumn">        <card-item          v-for="item in leftList"           :key="item.id"          :data="item"        />      </view>      <viewclass="column"ref="rightColumn">        <card-item          v-for="item in rightList"           :key="item.id"          :data="item"        />      </view>    </view>    <!-- 加载更多提示 -->    <viewv-if="loading"class="loading">加载中...</view>    <viewv-else-if="noMore"class="no-more">没有更多了</view>  </view></template><script>import CardItem from './CardItem.vue'export default {  components: { CardItem },  data() {    return {      leftList: [],      rightList: [],      loading: false,      noMore: false,      page: 1,      pageSize: 10    }  },  async onReady() {    await this.loadData()  },  // 页面滚动到底部触发（仅 H5/APP 有效）  onReachBottom() {    if (!this.loading && !this.noMore) {      this.page++      this.loadData()    }  },  methods: {    // 分配 item 到较短列    distributeItem(item) {      const leftHeight = this.getColumnHeight('left')      const rightHeight = this.getColumnHeight('right')      if (leftHeight <= rightHeight) {        this.leftList.push(item)      } else {        this.rightList.push(item)      }    },    getColumnHeight(column) {      const ref = column === 'left' ? this.$refs.leftColumn : this.$refs.rightColumn      if (!ref || !ref[0]) return 0      // 注意：uni-app 中 $refs 获取的是数组      return ref[0].$el.offsetHeight || 0    },    async loadData() {      this.loading = true      try {        const res = await this.fetchData(this.page, this.pageSize)        if (res.length === 0) {          this.noMore = true          return        }        res.forEach(item => this.distributeItem(item))      } catch (e) {        console.error('加载失败', e)      } finally {        this.loading = false      }    },    // 模拟 API 请求    fetchData(page, size) {      return new Promise(resolve => {        setTimeout(() => {          const mock = []          for (let i = 0; i < size; i++) {            const id = (page - 1) * size + i + 1            const type = ['image', 'text-image', 'video'][Math.floor(Math.random() * 3)]            mock.push({              id,              type,              // 模拟不同高度              height: 200 + Math.random() * 300,              url: `https://picsum.photos/300/${200 + Math.floor(Math.random() * 300)}`,              title: `标题 ${id}`,              desc: `这是第 ${id} 条内容的描述信息...`,              videoUrl: 'https://example.com/video.mp4',              poster: `https://picsum.photos/300/200?random=${id}`            })          }          resolve(mock)        }, 800)      })    }  }}</script><stylescoped>.waterfall-container {  display: flex;  padding: 10rpx;}.columns {  display: flex;  width: 100%;  gap: 20rpx;}.column {  flex: 1;  display: flex;  flex-direction: column;  gap: 20rpx;}.loading, .no-more {  text-align: center;  padding: 30rpx;  color: #999;}</style>

<template>  <viewclass="card":style="{ height: data.height + 'rpx' }">    <blockv-if="data.type === 'image'">      <image        :src="data.url"         mode="widthFix"         lazy-load        class="img"      />    </block>    <blockv-else-if="data.type === 'text-image'">      <image        :src="data.cover"         mode="widthFix"         lazy-load        class="img"      />      <viewclass="content">        <textclass="title">{{ data.title }}</text>        <textclass="desc">{{ data.desc }}</text>      </view>    </block>    <blockv-else-if="data.type === 'video'">      <video        :src="data.videoUrl"         :poster="data.poster"        controls        class="video"      />      <viewclass="video-info">        <text>{{ data.duration }}s</text>      </view>    </block>  </view></template><script>export default {  props: {    data: {      type: Object,      required: true    }  }}</script><stylescoped>.card {  background: #fff;  border-radius: 16rpx;  overflow: hidden;  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);}.img, .video {  width: 100%;}.content {  padding: 20rpx;}.title {  font-size: 28rpx;  font-weight: bold;  display: block;}.desc {  font-size: 24rpx;  color: #666;  margin-top: 10rpx;  display: block;}.video-info {  position: absolute;  bottom: 20rpx;  right: 20rpx;  background: rgba(0,0,0,0.5);  color: white;  padding: 4rpx 12rpx;  border-radius: 20rpx;  font-size: 20rpx;}</style>