html
<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>