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 //取反全屏状态
},
