uniapp项目实践总结(十八)自定义多列瀑布流组件

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

目录

• 准备工作
• 原理分析
• 实战演练
• 案例展示

准备工作

• 在pages/index文件夹下面新建一个waterfall.vue的组件；
• 按照前面文章所说的页面结构，编写好预定的瀑布流案例页面；
• 在网上找几张免费的图片素材；

原理分析

主要是根据图片的高度自动比较每列的总高度，根据uni.getImageInfo获取到图片高度，然后哪列低，就给哪列补充图片，直至图片列表循环完毕。

实战演练

模板使用

下面就是循环列和图片。

<view class="waterfall-page"><viewclass="waterfall-page-column"v-for="(item, index) in waterfall.columnList":key="index"ref="column"><viewclass="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 端效果
  
  

最后

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