uniapp瀑布流实现-编程知识

1. 图片瀑布流：

不依赖任何插件，复制即可见效：

<template><view class="page"><view class="left" ref="left"><image class="image" v-for="(item,i) in leftList" :key="i" :src="item" mode="widthFix"></image></view><view class="right" ref="right"><image class="image" v-for="(item,i) in rightList" :key="i" :src="item" mode="widthFix"></image></view></view>
</template><script>export default {data() {return {imageList: ["https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082","https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500","https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500","https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500","https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",], //所有图片leftList: [], //左边列图片rightList: [], //右边列图片leftHeight: 0, //左边列高度rightHeight: 0, //右边列高度columnWidth: 0 //列宽度}},mounted() {this.$nextTick(() => {uni.createselectorQuery().in(this).select('.left').boundingClientRect(res => {this.columnWidth = res.width//方法this.setWaterFallLayout()}).exec()})},onReachBottom() {console.log("触底");let newList = ["https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500","https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500","https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500","https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625","https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",]this.imageList.push(...newList)console.log(this.imageList);this.setWaterFallLayout();},methods: {//通过uni.getImageInfo，小程序支持async setWaterFallLayout() {for (let item of this.imageList) {try {let h = await this.getImgHeight(item)if (this.leftHeight <= this.rightHeight) {this.leftList.push(item)this.leftHeight += h} else {this.rightList.push(item)this.rightHeight += h}} catch (e) {}}},getImgHeight(url) {return new Promise((resolve, reject) => {uni.getImageInfo({src: url,success: e => {resolve(e.height)},fail: e => {reject(e)}})})}}}
</script><style lang="scss">.page {width: 100%;display: flex;align-items: flex-start;padding: 0 1%;box-sizing: border-box;}.left,.right {margin: 0 auto;width: 48%;}.image {width: 100%;height: auto;margin-bottom: 10px;}.info{width: 100%;height: 200rpx;background-color: #55aa7f;}
</style>

运行效果：
在这里插入图片描述

2. 商品瀑布流：

不依赖任何插件，复制即可见效：

<template><view class="Index"><!-- 瀑布流布局列表 --><view class="pubuBox"><view class="pubuItem"><view class="item-masonry" v-for="(item, index) in comList" :key="index"><image :src="item.img" mode="widthFix"></image><view class="listtitle"><!-- 这是没有高度的父盒子（下半部分） --><view class="listtitle1">{{ item.name }}</view><view class="listtitle2"><text class="listtitle2son">￥</text>{{ item.commdityPrice }}</view><view class="listtitle3">某某某某旗舰店</view></view></view></view></view></view>
</template><script>export default {data() {return {comList: [{img: "https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6",name: '商品的名称，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长',commdityPrice: 100}, {img: 'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=d6764859a9740bb4aead7703daa61876',name: '商品名称会在超出两行时候自动折叠',commdityPrice: 100},{img: 'https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=2e255208580c0570167a800344d3aa59',name: '只有一行标题时高度为39',commdityPrice: 100}, {img: 'https://img0.baidu.com/it/u=2627496060,1933351908&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=fd7a89ad586d338543b6916df7083e4f',name: '具体样式您可以自定义',commdityPrice: 100}, {img: 'https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6',name: 'vue的H5页面也是如此使用',commdityPrice: 100}], //商品列表};},onShow() {},onLoad() {},methods: {},// 触底加载下一页 换成真实的请求到的数据onReachBottom() {console.log("触底");// 模拟的请求数据let newList = [{img: "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",name: '具体样式您可以自定义',commdityPrice: 100}, {img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",name: '具体样式您可以自定义',commdityPrice: 100}, {img: "https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",name: '具体样式您可以自定义',commdityPrice: 100}, {img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",name: '具体样式您可以自定义',commdityPrice: 100},]this.comList.push(...newList)console.log(this.comList);},};
</script><style scoped="scoped" lang="scss">//瀑布流page {background-color: #eee;height: 100%;}.pubuBox {padding: 22rpx;}.pubuItem {column-count: 2;column-gap: 20rpx;}.item-masonry {box-sizing: border-box;border-radius: 15rpx;overflow: hidden;background-color: #fff;break-inside: avoid;/*避免在元素内部插入分页符*/box-sizing: border-box;margin-bottom: 20rpx;box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);}.item-masonry image {width: 100%;}.listtitle {padding-left: 22rpx;font-size: 24rpx;padding-bottom: 22rpx;.listtitle1 {line-height: 39rpx;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;min-height: 39rpx;max-height: 78rpx;}.listtitle2 {color: #ff0000;font-size: 32rpx;line-height: 32rpx;font-weight: bold;padding-top: 22rpx;.listtitle2son {font-size: 32rpx;}}.listtitle3 {font-size: 28rpx;color: #909399;line-height: 32rpx;padding-top: 22rpx;}}.Index {width: 100%;height: 100%;}
</style>