小程序+瀑布流

<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小程序商城瀑布流商品展示實現