<view class="video-list">
<view class="ul" style="display: none">
<view class="li" data-item="{{item}}" catchtap="toVideo" wx:for="{{videoList}}" wx:key="{{item.id}}">
<view class="video-img">
<image src="{{item.cover}}" id="{{item.id}}" mode='aspectFit' bindload="onImageLoad" />
</view>
<view class="p">{{item.title}}</view>
<view class="people" wx:if="{{item.member}}">
<view class="img">
<image src="{{item.member.avatar}}" mode='widthFix' />
</view>
<view class="span">{{item.member.nickname}}</view>
</view>
<view class="play">
<image src="https://www.yunzmall.com/min_img/home_play@2x.png" mode='widthFix' />
</view>
</view>
</view>
<view class="ul Mright">
<view class="li" data-item="{{item}}" catchtap="toVideo" wx:for="{{activitys1}}" wx:key="{{item.id}}">
<view class="video-img">
<image src="{{item.cover}}" id="{{item.id}}" mode='widthFix' />
</view>
<view class="p">{{item.title}}</view>
<view class="people" wx:if="{{item.member}}">
<view class="img">
<image src="{{item.member.avatar}}" mode='widthFix' />
</view>
<view class="span">{{item.member.nickname}}</view>
</view>
<view class="play">
<image src="https://www.yunzmall.com/min_img/home_play@2x.png" mode='widthFix' />
</view>
</view>
</view>
<view class="ul">
<view class="li" data-item="{{item}}" catchtap="toVideo" wx:for="{{activitys2}}" wx:key="{{item.id}}">
<view class="video-img">
<image src="{{item.cover}}" id="{{item.id}}" mode='widthFix' />
</view>
<view class="p">{{item.title}}</view>
<view class="people" wx:if="{{item.member}}">
<view class="img">
<image src="{{item.member.avatar}}" mode='widthFix' />
</view>
<view class="span">{{item.member.nickname}}</view>
</view>
<view class="play">
<image src="https://www.yunzmall.com/min_img/home_play@2x.png" mode='widthFix' />
</view>
</view>
</view>
</view>
.video-list .video-list {
margin: 16rpx;
text-align: left;
}
.video-list .video-list .ul {
vertical-align:top;
display: inline-block;
width: 49%;
/*display: flex;*/
/*flex-wrap: wrap;*/
}
.video-list .video-list .Mright {
margin-right: 2%;
}
.video-list .video-list .li {
position: relative;
display: flex;
flex-direction: column;
background-color: #ffffff;
overflow: hidden;
border-radius: 12rpx;
margin-bottom: 16rpx;
}
第一个ul是加载图片用的display:none ,后两列ul才是显示图片
<view class="video-img">
<image src="{{item.cover}}" id="{{item.id}}" mode='aspectFit' bindload="onImageLoad" />
</view>
bindload="onImageLoad"主要是用到了图片加载完的这个api
主要代码:图片加载完的时间进行计算高度,要主要宽高比这个东西,不然计算的高度不准确
缺点:显示的顺序不确定,因为图片加载控制不了
/**
* 图片加载函数
* 图片加载完成后,根据图片的高度,依次往第一列和第二列中推入数据
*/
onImageLoad (options) {
let currentId = options.currentTarget.id;
let imageWidth = options.detail.width; // 图片宽度
let imageHeight = options.detail.height; // 图片高度
let activitys = this.data.videoList; // 获取所有的数据资源
let activityObj = null;
let scle = (imageWidth/imageHeight);
for (let i = 0; i < activitys.length; i++) {
if (activitys[i].id == currentId) {
activityObj = activitys[i];
break;
}
}
let activitys1 = this.data.activitys1;
let activitys2 = this.data.activitys2;
if (colOneHeight <= colTwoHeight) {
colOneHeight += (176/scle) + 60;
activitys1.push(activityObj)
} else {
colTwoHeight += (176/scle) + 60;
activitys2.push(activityObj);
}
let data = {
activitys1: activitys1,
activitys2: activitys2
}
this.setData(data);
},
参考:https://blog.csdn.net/zhongguohaoshaonian/article/details/81941196小程序商城瀑布流商品展示实现