1.wxml

<view class='collect-out'> <view style='display:none'> <image wx:for="{{list}}" wx:key="" id="{{item.id}}" src="{{imgHttp+item.cover_img}}" bindload="onImageLoad" mode="widthFix" class="collecting-img shadow-bottom" lazy-load="true"></image> </view> </view> <view class='space-between'> <view class="collect-out" style='float:left' wx:if="{{col1.length}}"> <block wx:for="{{col1}}" wx:key="" wx:for-index="idx" wx:for-item="item"> <view class="collecting user-shadow" bindtap='informDetailtap' id="{{item.id}}"> <image lazy-load="true" class="collecting-img  shadow-bottom fade_in" src="{{imgHttp+item.cover_img}}" mode="widthFix"> <image lazy-load="true" id='{{item.id}}' data-is='is_collection' class="collect-img fade_in" src="{{imgSrc}}index/collect_{{item.is_collection? '1':'0'}}.png" mode="widthFix" catchtap='collectTap'></image> </image> <text class="collecting-name">{{item.name}}</text> <view class="space-between"> <view class="price"> <text Class ="price-cost">{{item.rent}}</text> <text class="price-unit"> meta </text> </view> <view class="date">{{item.published_date}}</view> </view> </view> </block> </view> <view class="collect-out" style='float:left' wx:if="{{col2.length}}"> <block wx:for="{{col2}}" wx:key="" wx:for-index="idx" wx:for-item="item"> <view class="collecting user-shadow" bindtap='informDetailtap' id="{{item.id}}"> <image lazy-load='true' class="collecting-img shadow-bottom fade_in" src="{{imgHttp+item.cover_img}}" mode="widthFix"> <image id='{{item.id}}' class="collect-img fade_in" src="{{imgSrc}}index/collect_{{item.is_collection?'1':'0'}}.png" mode="widthFix" catchtap='collectTap'></image> </image> <text class="collecting-name">{{item.name}}</text> <view class="collecting-tag"> <view class="price"> <text class="price-cost">{{item.rent}}</text> <text class="price-unit"> meta </text> </view> <view class="date">{{item.published_date}}</view> </view> </view> </block> </view> </view>Copy the code

2.wxss

.collecting-img{
   width: 100%; 
   position: relative;
}
 .collect-img{
  position: absolute;
  bottom: 20rpx;
  right: 16rpx;
  width: 76rpx;
} 
.collecting-name {
  font-size: 26rpx;
  font-weight: bold;
  margin: 20rpx 0 15rpx;
}

.collecting-tag {
   display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  color: #9b9b9b;
  font-size: 18rpx;
  display: flex;
  flex-direction: row;
  margin-top: 9rpx;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; 
}

.tag text {
  border: 1rpx solid #F1F1F1;
  margin-right: 4rpx;
  padding: 0 9rpx;
  height: 24rpx;
  line-height: 24rpx;
  display: inline-block;
}
.collecting {
  padding: 10rpx 10rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 20rpx;

}

.collect-out {
   /* width: 100%;  */
   width: 49%; 
  margin-top: 20rpx;
  column-width: 330rpx;   
  column-gap: 20rpx; 
}

.collect-out:after {
  content: '';
  width: 0;
  height: 0;
  display: block;
  clear: both;
}
.price-cost{
  font-size: 26rpx;
}
.price-unit{
  font-size: 18rpx;
}
.price-cost,.price-unit{
  color: #fb4040;
}
Copy the code

3.js

let col1H = 0 let col2H = 0 Page({ data: { imgSrc: app.globalData.imgSrc, imgHttp: app.globalData.imgHttp, animationData: {}, col1: [], col2: [], images: [], }, onLoad: Wx. request({url: request_getGoodsList, data: {"session3rd": userID, "type": 1, "cat_ids": menunav, "labels": menulist, "page": page, "pageSize": pageSize }, success: function (res) { if (res.data.code == -2) { that.setData({ list: [] }) } if (res.data.code == 1) { var list = res.data.list that.setData({ list: OnImageLoad: function (e) {let imageId = e.currenttarget; let oImgW = e.detail.width; // let oImgH = e.daile.height; ImgWidth = 155.5; ImgWidth/oImgW; // Let scale = imgWidth/oImgW; ImgHeight = oImgH * scale; // Let imageObj = null; let images = this.data.list; for (let i = 0; i < images.length; i++) { let img = images[i]; if (img.id === imageId) { imageObj = img; break; } } let loadingCount = this.data.loadingCount - 1; let col1 = this.data.col1; let col2 = this.data.col2; if (col1H <= col2H) { col1H += imgHeight; col1.push(imageObj); } else { col2H += imgHeight; col2.push(imageObj); } let data = { loadingCount: loadingCount, col1: col1, col2: col2 }; if (! loadingCount) { data.images = []; } this.setData(data); }})Copy the code