uniapp瀑布流

<view class="goodsContent">

<view class="goodsLeftList" >

<view class="goodsItem" v-for="item in goodsLeftList">

<image :src="item.image_url" @load="onImageLoad" mode="widthFix"></image>

<view class="goodsName">{{item.name}}</view> <view class="goodsPrice">

<image src="../../static/img/common/price.png" mode="widthFix"></image>

<text>{{item.priceNow}}</text> </view> </view> </view> <view class="goodsRightList"> <view class="goodsItem" v-for="item in goodsRightList">

<image :src="item.image_url" @load="onImageLoad" mode="widthFix"></image> <view class="goodsName">{{item.name}}</view>

<view class="goodsPrice"> <image src="../../static/img/common/price.png" mode="widthFix"></image> <text>{{item.priceNow}}</text> </view> </view> </view> </view>

 数据

goodsList:[ { name:"高配版热水器", priceNow : "1499.00", image_url:"goodImg/1.jpg", }, { name:"速热高温煮水蛋", priceNow : "499.00", image_url:baseUrl.local_url+"goodImg/2.jpg", }, { name:"速热高温煮水蛋", priceNow : "499.00", image_url:baseUrl.local_url+"goodImg/3.jpg", }, ],

goodsListCount:0, //加载第i张图片 // 左侧商品列表

goodsLeftList:[],

goodsLeftListHeight : 0, // 右侧商品列表

goodsRightList:[],

goodsRightListHeight : 0,

// 图片绑定事件，通过比较左右列表高度，实现瀑布流展示

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]);

}

}

}

},

/* 商品列表 */

.goodsContent{

100%; background: #f7f7f7; display: flex; justify-content: center; }

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

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

.goodsItem{ background: #FFFFFF; 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; }