uniapp中实现瀑布流 短视频页面展示_uniapp短视频模板

直接上干货
第一部分为结构

<swiper class="list" :current='index' @change="swiperchange" @scrolltolower="onReachBottom">
			<swiper-item style="overflow: scroll;" v-for="(item,index) in 2" :key="index">
					<view v-for="(item,index) in list " class="list_item" :style="{'--top2':item.top+'px','--left':item.left}">
                        <view class="" style="background: rgba(0, 0, 0, 0.5);">
                        	<view class="">
                        		<!-- <image class="fm" src="https://api.ccttiot.com/smartmeter/img/static/uGUX2rY4w3ZPvRhrKpWw" mode=""> -->
                        		<image class="fm" :src="item.url" mode="widthFix"></image>
                        	</view>
                        	<view class="wz">
                        		<view class="title">
                        			的故事吧概念啊啊啊啊啊啊啊
                        		</view>
                        		<view class="xx">
                        			<image class="tx" src="https://api.ccttiot.com/smartmeter/img/static/u8HN5WcA04XMKLsMnr2P"
                        				mode=""></image>
                        			<view class="username">
                        				皮蛋瘦肉...
                        			</view>
                        			<image class="sc" src="https://api.ccttiot.com/smartmeter/img/static/uQJ3tBEKEmeC4jexhNgK"
                        				mode=""></image>
                        			<view class="dz">
                        				3056
                        			</view>
                        		</view>
                        	</view>
                        </view>
						<view class="kong" style="width: 100%;height: 20rpx;background-color: transparent;"></view>
					</view>
			</swiper-item>
		</swiper>
 
 

第二部分为样式
 

		.list {
			width: 100%;
			margin-top: 36rpx;
			display: flex;
			justify-content: space-between;
			padding-right: 36rpx;
			flex-wrap: wrap;
			height: 80vh;
			overflow: scroll;
			box-sizing: border-box;
		    position: relative;
			.list_item:last-of-type{
				padding-bottom: 200rpx;
			}
			.list_item {
				width: 326rpx;
				box-sizing: border-box;
				margin-top: 22rpx;
				overflow: hidden;
		        margin-left: 34rpx; 
				break-inside: avoid;
				position: absolute;
				// 设置为变量
				top: var(--top2);
				left: var(--left);
				.fm {
					width: 100%;
					height: 326rpx;
					border-radius: 10rpx;
					object-fit: cover;
				}
		
				.wz {
					padding: 18rpx 16rpx;
					padding-top: 0 !important;
					box-sizing: border-box;
		
					.title {
						font-size: 28rpx;
						color: #FFFFFF;
						margin-top: 10rpx;
						text-align: left;
					}
		
					.xx {
						display: flex;
						margin-top: 12rpx;
						align-items: center;
		
						.tx {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
		
						.username {
							font-size: 24rpx;
							color: #FFFFFF;
							margin-right: 16rpx;
						}
		
						.sc {
							width: 25rpx;
							height: 24rpx;
							margin-right: 8rpx;
						}
		
						.dz {
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}
				}
		
			}
		}

第三部分为js部分
 

export default {
		data() {
			return {
				AllData: [],
				leftHeight: 0,
				rightHeight: 0,
				list: [{
						url: "https://api.ccttiot.com/smartmeter/img/static/ur3ZXP3az10GilTm9nOV",
						left: "50%",
						top: "0",
					}, {
						url: "https://api.ccttiot.com/smartmeter/img/static/uFo3Rj5OC6S3h0RNaZqf",
						left: "50%",
						top: "0",
					}, {
						url: "https://api.ccttiot.com/smartmeter/img/static/ur3ZXP3az10GilTm9nOV",
						left: "50%",
						top: "0",
					},
					{
						url: "https://api.ccttiot.com/smartmeter/img/static/u8HN5WcA04XMKLsMnr2P",
						left: "50%",
						top: "0",
					},
					{
						url: "https://api.ccttiot.com/smartmeter/img/static/uZQmeK9Fp2oHAnu3Yc3U",
						left: "50%",
						top: "0",
					},
					{
						url: "https://api.ccttiot.com/smartmeter/img/static/uGUX2rY4w3ZPvRhrKpWw",
						left: "50%",
						top: "0",
					},
					{
						url: "https://api.ccttiot.com/smartmeter/img/static/uZQmeK9Fp2oHAnu3Yc3U",
						left: "50%",
						top: "0",
					},
					{
						url: "https://api.ccttiot.com/smartmeter/img/static/u8HN5WcA04XMKLsMnr2P",
						left: "50%",
						top: "0",
					},
					{
						url: "https://api.ccttiot.com/smartmeter/img/static/uFo3Rj5OC6S3h0RNaZqf",
						left: "50%",
						top: "0",
					},
				],
				
 
			}
		},
		onLoad() {
            //在页面一开始就获取数据进行操作
			setTimeout(() => {
				uni.createSelectorQuery().selectAll('.list_item').boundingClientRect(data => {
					data.forEach((item) => {
						this.AllData.push(item.height)
					})
					for (let i = 0; i < this.AllData.length; i++) {
						// 判断赋值
						if (this.rightHeight < this.leftHeight) {
							// 设置位置
							this.list[i].left = '50%'
							// 先进行赋值
							this.list[i].top = this.rightHeight
							// 再进行累加
							this.rightHeight += this.AllData[i]
						} else {
							this.list[i].left = 0
							this.list[i].top = this.leftHeight
							this.leftHeight += this.AllData[i]
						}
					}
				}).exec()
			}, 500)
		},
		methods: {
			swiperchange(e){
				console.log(e.target.current);
				this.index = e.target.current
			}，
		}
	}
</script>

最后附上效果图  当中我所使用的图片均为线上图片