uniapp自定义多列瀑布流组件项目实战总结

作者：阿沐时间：2026-11-01 00:04:20浏览：247

本文详细介绍在uniapp中实现自定义多列瀑布流组件的完整流程。从准备工作到原理分析，重点讲解如何利用uni.getImageInfo获取图片高度，通过动态比较列高实现自动填充。包含模板、样式及核心JS逻辑的代码示例，并展示H5、小程序及APP端的实际运行效果，帮助开发者快速掌握不规则图片列表的布局技巧。

导语

在展示图片等内容时，常遇到图片高度不一致的情况，此时无法使用等高双列或多列布局，而需采用瀑布流页面布局。本文将共同探讨瀑布流的具体实现方法。

准备工作

在pages/index文件夹下新建一个waterfall.vue组件；
依据前文所述的页面结构，编写好预定的瀑布流案例页面；
从网络获取几张免费图片素材；

原理分析

核心逻辑是根据图片高度自动比较每列的总高度，利用uni.getImageInfo获取图片高度，随后将图片分配给总高度较低的列，直至图片列表循环结束。

实战演练

模板使用

接下来进行列和图片的循环渲染。

<view class="waterfall-page">
  <view
    class="waterfall-page-column"
    v-for="(item, index) in waterfall.columnList"
    :key="index"
    ref="column"
  >
    <view
      class="waterfall-page-item"
      v-for="(pItem, pIndex) in item"
      :key="pIndex"
    >
      <image class="waterfall-page-img" :src="pItem" mode="widthFix"></image>
    </view>
  </view>
</view>

样式编写

.waterfall-page {
  display: flex;
  align-items: flex-start;
  .waterfall-page-column {
    box-sizing: border-box;
    flex: 1;
    padding: 0 10rpx;
    width: 0;
    .waterfall-page-item {
      margin-bottom: 10rpx;
      .waterfall-page-img {
        display: inline-block;
        width: 100%;
      }
    }
  }
}

脚本使用

定义数据

// 瀑布流信息
const waterfall = reactive({
  // 图片列表
  imgList: [
    "/static/image/waterfall/pic-01.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-03.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-05.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-01.jpg",
    "/static/image/waterfall/pic-03.jpg",
    "/static/image/waterfall/pic-07.jpg",
  ],
  columnList: [], // 每列图片
  columnHeight: [], // 每列图片高度
  columnCount: 2, // 总列数
});

初始化数据

// 初始化数据
function initData() {
  for (var i = 0; i < waterfall.columnCount; i++) {
    waterfall.columnList.push([]);
    waterfall.columnHeight.push(0);
  }
}

计算方法

// 设置瀑布流布局
async function setWaterfallLayout() {
  for (var i = 0; i < waterfall.imgList.length; i++) {
    let item = waterfall.imgList[i];
    try {
      let imgInfo = await uni.getImageInfo({
          src: item,
        }),
        h = imgInfo.height;
      for (let j = 0; j < waterfall.columnCount - 1; j++) {
        let prevIndex = j,
          nextIndex = j + 1;
        if (
          waterfall.columnHeight[prevIndex] <= waterfall.columnHeight[nextIndex]
        ) {
          waterfall.columnList[prevIndex].push(item);
          waterfall.columnHeight[prevIndex] += h;
        } else {
          waterfall.columnList[nextIndex].push(item);
          waterfall.columnHeight[nextIndex] += h;
        }
      }
    } catch (error) {
      console.log(error);
    }
  }
}