<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{
width: 100%; background: #f7f7f7; display: flex; justify-content: center; }
.goodsLeftList{ margin:0 10rpx 0 40rpx; width: 325rpx; }
.goodsRightList{ margin:0 40rpx 0 10rpx; width: 325rpx; }
.goodsItem{ background: #FFFFFF; width:325rpx; margin-bottom: 15rpx; }
.goodsItem image{ max-height: 600rpx; height: auto; width: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{ width: 20rpx; height: 20rpx; padding: 0 5rpx; }