h5的瀑布流有多种方式可以实现
1、最简单的直接用css3
2、flex结合对数组的处理分左右列
3、使用uview的瀑布流组件即可（其实原理和第2种一样也是分左右列）
4、使用uniapp 的video 组件 实现点击全屏播放，再点击又缩回封面图

1、最简单的直接用css3

代码：

<template>
    <view>
        <view class="list">
            <view class="list-item" v-for="item in list">
                <view class="item-top">
                    <image class="medium" mode="widthFix" 
                        :src="item.cover_url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=')"></image>
                    <text class="title">{{item.title}}</text>
                </view>
                <view class="item-bottom">
                    <view class="button" @tap="openApp">使用</view>
                    <text class="use-count">{{item.use_count}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<style  lang='less'>
  .list{
        /*将内容分成两列展示 兼容*/
        column-count: 2;
        -moz-column-count: 2;
        -webkit-column-count: 2;
        /*规定列之间的间隔 兼容*/
        column-gap: 4px;
        -moz-column-gap: 4rpx;
        -webkit-column-gap: 4rpx;
       image{
            width: 100%;
        }
        .list-item{
             /*避免内容分页*/
             break-inside: avoid;          
         }      
   }
</style>

我这里就上最简单的代码，能实现效果即可，置于ui方面自己去调整就好。
其实简单的css3代码就只有一行，column-count，这一行即可实现【瀑布流】了，其他的两个是为了在不同的浏览器上可以兼容。
column-gap是为了控制每列之间的间隔，同样的另外两个也是为了兼容。
在list-item里加上break-inside是为了不让他的内容被挤到下一行，不过这种情况不多，会的时候加上就好。
list是个数组，里面有[{id:xxxx,cover_url:xxxx,....},{},{}]数组随便编一下就行

效果：

image.png

2、flex结合对数组的处理分左右列

代码：

<template>
  <view class="content">
        <view class="list">
            <view class="left">
                <view class="list-item" v-for="item in list">
                    <view class="item-top">
                        <image class="medium" mode="widthFix" 
                            :src="item.cover_url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=')"></image>
                        <text class="title">{{item.title}}</text>
                    </view>
                    <view class="item-bottom">
                        <view class="button" @tap="openApp">使用</view>
                        <text class="use-count">{{item.use_count}}</text>
                    </view>
                </view>
            </view>
            <view class="right">
                <view class="list-item" v-for="item in list" v-if="item.id%3==0||item.id%7==0">
                    <view class="item-top">
                        <image class="medium" mode="widthFix" 
                            :src="item.cover_url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=')"></image>
                        <text class="title">{{item.title}}</text>
                    </view>
                    <view class="item-bottom">
                        <view class="button" @tap="openApp">使用</view>
                        <text class="use-count">{{item.use_count}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

.content {
        border: 1rpx solid #333333;

        .list{
            margin: 10rpx 10rpx;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left{
                width: 100%;
            }
            .right{
                width: 100%;
            }
            .list-item{
                margin: 20rpx 10rpx;
            }
            .medium{
                width: 100%;
            }
        }
    }

效果：

image.png

3、使用uview的瀑布流组件即可（其实原理和第2种一样也是分左右列）
直接官方文档，详细到不行
https://www.uviewui.com/components/waterfall.html#api

4、使用uniapp 的video 组件 实现点击全屏播放，再点击又缩回封面图

代码：

<video class="medium" :id="'video-'+item.id" @click="seeVideo"
                        :show-center-play-btn="false" :controls="false" object-fit="contain" :show-play-btn="false"
                        :poster="item.cover_url"
                        :src="item.video_url"></video>

poster是封面图
绑定seeVideo方法

//大屏预览视频
seeVideo(e){
    let id = e.currentTarget.id
    this.videoContext = uni.createVideoContext(id) //创建一个播放的元素
    if(this.videoScreen==false){//这个值需要初始化  我已经放在data中了 ，这个值是表示当前的视频是否全屏的状态
        // 先播放，再全屏，否则在微信安卓里会有bug
        this.videoContext.play()
        this.videoContext.requestFullScreen()  //如果非全屏状态，点击的时候先播放，再全屏
    }else{
        this.videoContext.pause()   //先暂停
        this.videoContext.exitFullScreen()   //再推出全屏
    }
    this.videoScreen = !this.videoScreen   //取反全屏状态
},