微信小程序瀑布流布局

<template>
	<view id="max_box">
		<view  class="page-main">
		  <view class="card">
		      <view class="coloum1" >
		        <view class="card-item" v-for="(item,index) in cardList1" :key="item.id" :style="[{background: item.color}]">
		            <image class="itemImg" :src="item.f_image" mode="widthFix"></image>
					<view class="item_text" >{{item.f_id}}</view>
		        </view>
		      </view>
		      <view class="coloum2">
		         <view class="card-item" v-for="(item,index) in cardList2" :key="item.id" :style="[{background: item.color}]">
		            <image class="itemImg" :src="item.f_image" mode="widthFix"></image>
					<view class="item_text" >{{item.f_id}}</view>
		        </view>
		      </view>
		  </view>
		</view>
	</view>
</template>

<script>
	// 获取系统信息
	const systemInfo = wx.getSystemInfoSync();
	// 获取屏幕宽度
	const screenWidth = systemInfo.screenWidth;
	import store from '@/store/index.js'
	const myrpx = store.state.myrpx
	import http from '@/util/http.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				num: '0',
				cardList:[
				],
				leftHeight:0,//左侧列表累计高度
				rightHeight:0,//右侧列表累计高度
				commonHeigt:100, //瀑布流卡片 除图片外的固有高度
				cardList1:[],//左侧列表渲染数据
				cardList2:[],//右侧列表渲染数据
			}
		},
		async onLoad() {
			this.getPublishedforum()
			
		},
		methods: {
			init(){
				//初始化两侧累计高度、两侧表数据
				//重新通过接口获取数据
				this.leftHeight = 0
				this.rightHeight = 0
				//获取图片宽高比
				this.cardList = this.cardList.filter((item,index)=>{
					//获取图片宽高比
					uni.getImageInfo({
					  src: item.f_image,
					  success: res => {
					    // 计算宽高比
					    const ratio = res.width / res.height
						//图片真实高度= 真实宽度 / 宽高比  myrpx当前机型 px换算成rpx此处省略
						item.trueHeight = (screenWidth * myrpx * 0.48) / ratio
						if(this.leftHeight <= this.rightHeight){ //如果右侧列大于左侧列的总高度  则添加左边
							this.cardList1.push(item)
							this.leftHeight =this.leftHeight + item.trueHeight + this.commonHeigt
						}else{
							this.cardList2.push(item)
							this.rightHeight =this.rightHeight + item.trueHeight + this.commonHeigt
							
						}
					  } 
					})
					return item
				})
			},
			// 获取发布的帖子数据
			getPublishedforum() {
				http('/getPublishedpost', 'POST', 
					{ 
					  start:0,
					  count:10
					},
				)
				.then((res) => {
						this.cardList = res[1].data
						this.init()
					})
			},
		}
	}
</script>

<style lang="less">
		.page-main{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			.card{
				display: grid;
				grid-template-columns: repeat(2,1fr);
				grid-gap: 10px; /* 列之间和行之间的间隙 */
			}
			.card-item{
				width: 400rpx;
				image{
					width: 100%;
				}
				margin-bottom: 10rpx;
			}
			.item_text{
				width: 100%;
				height: 100rpx;
				background-color: skyblue;
				z-index: 999;
			}
		}
</style>