小程序+瀑布流

<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/[email protected]" 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/[email protected]" 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/[email protected]" 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小程序商城瀑布流商品展示实现