导语：有时候展现图片等内容，会遇到图片高度不统一的状况，这时候就不能应用等高双列或多列展现了，这时候会用到瀑布流的页面布局，上面就一起探讨一下瀑布流的实现办法。

目录

  • 筹备工作
  • 原理剖析
  • 实战演练
  • 案例展现

筹备工作

  • 在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);    }  }}

案例展现

  • h5 端成果

  • 小程序端成果

  • APP 端成果

最初

以上就是自定义多列瀑布流组件的次要内容，有不足之处，请多多斧正。