vue实现瀑布流

template 里面：

<view class="goodsContent">
<view class="goodsLeftList">
<view class="goodsItem" onclick="jumpDetail(1)" v-for="(item,index) in goodsLeftList" :key="index">
<image :src="item.image_url" @load="onImageLoad" mode="widthFix"></image>
<view class="goodsName">{{item.name}}</view>
<view class="goodsPrice">
<image src="../../../static/game/icon-price-sure.svg" mode="widthFix"></image>
<text>{{item.priceNow}}</text>
</view>
</view>
</view>
<view class="goodsRightList">
<view class="goodsItem" v-for="(item,index) in goodsRightList" onclick="jumpDetail(1)">
<image :src="item.image_url" @load="onImageLoad" mode="widthFix"></image>
<view class="goodsName">{{item.name}}</view>
<view class="goodsPrice">
<image src="../../../static/game/icon-price-sure.svg" mode="widthFix"></image>
<text>{{item.priceNow}}</text>
</view>
</view>
</view>
</view>

js 里：

export default {
data() {
return {
hotGame: "1222222",
goodsList: [{
name: "高配版热水器",
priceNow: "1499.00",
image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583671469409&di=f6ed0a0960506e12af88b62e7329142d&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F361b2f98c2a56a98731e84759a52170fc670db51.jpg",
},
{
name: "速热高温煮水蛋",
priceNow: "499.00",
image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583671469410&di=6bdb6526f0117380db303ac285c94974&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fd%2Fdc%2F0f45274990.jpg",
},
{
name: "速热高温煮水蛋",
priceNow: "499.00",
image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583671469426&di=5707559fd718e43f330ed9f14be75a17&imgtype=0&src=http%3A%2F%2Fpic.soutu123.cn%2Felement_origin_min_pic%2F16%2F09%2F11%2F2057d54d4e4f399.jpg%2521%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue",
},
{
name: "速热高温煮水蛋",
priceNow: "499.00",
image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583671469410&di=6bdb6526f0117380db303ac285c94974&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2Fd%2Fdc%2F0f45274990.jpg",
},
],
goodsListCount: 0, //加载第i张图片
// 左侧商品列表
goodsLeftList: [],
goodsLeftListHeight: 0,
// 右侧商品列表
goodsRightList: [],
goodsRightListHeight: 0,
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500
}
},

onLoad: function(options) {
setTimeout(function() {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},

components: {
indexLable,
hotGame //注册子组件
},
watch: {
goodsList: function(e) {
this.waterfallImage();
},
},
created() {
this.waterfallImage();
window.jumpDetail = this.jumpDetail;
},

mounted() {
this.getSwiper();
},

methods: {
async getSwiper(){
const res = await this.$myRequest({
url:'/Api/Web',
methods:'POST',
data:'{"id": 19,"jsonrpc": "2.0","method": "getShopList","params": {"reqtime": "1595926859","vcode":"e7169d8b2ef35cea1fe271ac4ebc2e9e","page":"2"}}',
})
//这里只需要传入不同的接口地址就可以
console.log(res);



},

//跳转分类页面
jumpDetail:function(id){
uni.navigateTo({
url: '/pages/game/Detail/shopDetail'
})
},

// 图片绑定事件，通过比较左右列表高度，实现瀑布流展示
onImageLoad: function(e) {
let divWidth = 295; //显示的单栏宽度，我设为295rpx
let oImgW = e.detail.width; //图片原始宽度
let oImgH = e.detail.height; //图片原始高度
let rImgH = divWidth * oImgH / oImgW; //根据宽高比计算当前载入的图片的高度
if (rImgH > 600) {
rImgH = 600; //限制图片最高600rpx，可在css中添加 max-height:600rpx;
}
if (this.goodsListCount == 0) {
this.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight
this.goodsListCount++; //图片索引加1
this.goodsRightList.push(this.goodsList[this.goodsListCount]); //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
} else {
this.goodsListCount++; //图片索引加1
if (this.goodsLeftListHeight > this.goodsRightListHeight) { //把图片的高度加到目前高度更低的栏中
this.goodsRightListHeight += rImgH; //第二张图片高度加到goodsRightListHeight
} else {
this.goodsLeftListHeight += rImgH;
}
if (this.goodsListCount < this.goodsList.length) { //根据目前的栏高，把下一张图片，push到低的那栏
if (this.goodsLeftListHeight > this.goodsRightListHeight) {
this.goodsRightList.push(this.goodsList[this.goodsListCount]);
} else {
this.goodsLeftList.push(this.goodsList[this.goodsListCount]);
}
}
}
},
// 向商品列表添加第一张图片
waterfallImage() {
this.goodsLeftList.push(this.goodsList[0]);
},
changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots
},
changeAutoplay(e) {
this.autoplay = !this.autoplay
},
intervalChange(e) {
this.interval = e.target.value
},
durationChange(e) {
this.duration = e.target.value
}
}}

css 样式：

/* 商品列表 */
.goodsContent {
100%;
background: #FFFFFF;
display: flex;
justify-content: center;
}

.goodsLeftList {
margin: 0 10rpx 0 40rpx;
325rpx;
}

.goodsRightList {
margin: 0 40rpx 0 10rpx;
325rpx;
}

.goodsItem {
background: rgba(240, 240, 240, 0.8);
325rpx;
margin-bottom: 15rpx;
}

.goodsItem image {
max-height: 600rpx;
height: auto;
295rpx;
padding: 15rpx 15rpx 5rpx;
}

.goodsName {
font-size: 28rpx;
color: #2e2e2e;
padding: 0 20rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.goodsPrice {
color: #ffac29;
font-size: 24rpx;
padding: 0 15rpx;
}

.goodsPrice image {
20rpx;
height: 20rpx;
padding: 0 5rpx;
}