小程序实现容器图片流式布局功能，因为目前论坛上也有很多博主出过类似的文章，这里我就以一个小白角度去讲一下如何实现的吧。给作者一点点鼓励，先点个赞赞吧👍，蟹蟹！！
目标
实现下方效果图
技术栈
微信小程序原生框架，wxml+wxss+js，因为后端是云开发的，所以网络请求是官方的api，比如wx.cloud.database().collection("community") .get()
这样做的好处
能根据图片的高度自适应容器高度，整体美观，易读
实现逻辑
1.页面布局wxml，一个大容器（宽度撑满屏幕高度）中，包含两列容器，左边一列，右边一列。如图所示，有图清晰一点。
2.首先获取一个数组dataList，用于渲染到页面上的数据，这里就用闲置帖子为例。
3.准备两个变量，一个是整型leftheight，作为左边容器实时高度，另一个是整型rightheight，作为右边容器实时高度。
4.获取数组后将回调值res中的data赋值给list局部变量，并循环这个list数组，同时判断左边的容器高度和右边的容器哪个更低，将子元素（子元素为对象）设置一个index属性标记属于左边容器，还是右边容器，这里的例子是index == 0 时候是左边容器，index==1时候是右边容器。每一次循环渲染子元素的时候判断左右容器高低，左边容器低则index设置为0标记到左边容器中去，否则亦反。
注意：picheight为数据库中数据已有的字段属性，为图片的高度
var that = this
var list = res.data //res.data为获取数据库中返回的数据数组 ，list为临时存储变量
var dataList = that.data.dataList //dataList为最终渲染到页面的数组数据
var leftheight = that.data.leftheight // 获取全局变量保存的左边容器高度
var rightheight = that.data.rightheight // 获取全局变量保存的右边容器高度
for (let i = 0; i < list.length; i++) {
//这里的picheight为存储到数据库时候的高度
if (leftheight <= rightheight) {
leftheight = leftheight + list[i].picheight + 120
list[i].index = 0
} else {
rightheight = rightheight + list[i].picheight + 120
list[i].index = 1
}
dataList.push(list[i])
}
that.setData({
dataList: dataList,
leftheight: leftheight,
rightheight: rightheight
})
5.在wxml通过for循环渲染出来
部分关键代码：
<view class="shop-big-box flex-row-center-x">
<!-- 左列表 -->
<view class='shop'>
<block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 0}}">
<my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" />
</block>
</view>
<!-- 右列表 -->
<view class='shop'>
<block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 1}}">
<my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" />
</block>
</view>
</view>
my-datalist组件
<view class="shop-detail" bindtap="godetail" data-id="{{item._id}}">
<view class='imagecont' style="height:{{item.picheight}}rpx;">
<block wx:if="{{item.pictures.length > 0}}">
<image src="{{item.pictures[0]}}" data-index="{{index}}" class="prodimg" style="height:{{item.picheight}}rpx;z-index: 3;" mode="aspectFill" />
</block>
</view>
</view>
<view style="width: 100%;display: flex;flex-wrap: wrap;height: 120rpx;">
<view class="shop-detail-text">{{item.text}}</view>
<view class="shop-detail-user flex-row-center">
<image src="{{item.user.imagavatares}}" style="border-radius: 50%;width: 30rpx;height: 30rpx;margin: 0 10rpx;background-color: rgb(247, 247, 247);" />
<text>{{item.user.username}}</text>
</view>
</view>
</view>
完整代码
index.wxml
javascript
<view class="shop-big-box flex-row-center-x">
<!-- 左列表 -->
<view class='shop'>
<block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 0}}">
<my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" />
</block>
</view>
<!-- 右列表 -->
<view class='shop'>
<block wx:for="{{dataList}}" wx:key="_id" wx:if="{{item.index == 1}}">
<my-datalist item="{{item}}" index="{{index}}" data-src="{{item.pictures[0]}}" data-index="{{index}}" bind:getimage="getimage" />
</block>
</view>
</view>index.wxss
javascript
.shop-big-box{
width: 100%;
}
.shop{
width: 340rpx;
margin: 0 10rpx;
}
/* 盒子水平摆放并水平居中 */
.flex-row-center-x{
display: flex;
flex-direction: row;
justify-content: center;
}index.js
javascript
// pages/index/index.js
const app = getApp()
const db = wx.cloud.database()
const _ = db.command
Page({
/**
* 页面的初始数据
*/
data: {
dataList: [],
leftheight: 0,
rightheight: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
this.getList()
},
getList() {
var that = this
wx.cloud.database().collection("community")
.orderBy('top', 'desc')
.orderBy('date', 'desc')
.get({
success(res) {
console.log("出来的数据", res.data);
if (res.data.length > 0) {
var list = res.data
var dataList = that.data.dataList
var leftheight = that.data.leftheight
var rightheight = that.data.rightheight
for (let i = 0; i < list.length; i++) {
if (leftheight <= rightheight) {
leftheight = leftheight + list[i].picheight + 120
list[i].index = 0
} else {
rightheight = rightheight + list[i].picheight + 120
list[i].index = 1
}
dataList.push(list[i])
}
that.setData({
dataList: dataList,
leftheight: leftheight,
rightheight: rightheight,
})
}
},
fail(err) {
wx.showToast({
title: '网络出错啦！' + err,
icon: 'none'
})
}
})
},
})index.json
javascript
{
"usingComponents": {
"my-datalist": "../../components/datalist/datalist"
},
"navigationStyle": "custom",
"enablePullDownRefresh": true
}components/datalist.js
javascript
const app = getApp()
const db = wx.cloud.database()
const _ =db.command
Component({
properties: {
item: JSON,
index:String,
},
methods: {
godetail(e) {
wx.navigateTo({
url: '/pages/Filecommunity/detail/detail?id=' + e.currentTarget.dataset.id,
})
},
getimage() {
this.triggerEvent('getimage');
},
},
});components/datalist.json
javascript
{
"component": true,
"usingComponents": {}
}components/datalist.wxml
html
<view class="shop-detail" bindtap="godetail" data-id="{{item._id}}">
<view class='imagecont' style="height:{{item.picheight}}rpx;">
<block wx:if="{{item.pictures.length > 0}}">
<image src="{{item.pictures[0]}}" data-index="{{index}}" class="prodimg" style="height:{{item.picheight}}rpx;z-index: 3;" mode="aspectFill" />
</block>
</view>
<view style="width: 100%;display: flex;flex-wrap: wrap;height: 120rpx;">
<view class="shop-detail-text">{{item.text}}</view>
<view class="shop-detail-user flex-row-center">
<image src="{{item.user.imagavatares}}" style="border-radius: 50%;width: 30rpx;height: 30rpx;margin: 0 10rpx;background-color: rgb(247, 247, 247);" />
<text>{{item.user.username}}</text>
</view>
</view>
</view>components/datalist.wxss
css
.shop-detail{
border-radius: 10rpx;
width: 340rpx;
background: #fff;
display: inline-block;
font-size: 28rpx;
margin: 10rpx 0;
}
.shop-detail-text{
font-size: 28rpx;
width: 100%;
margin: 10rpx 0;
overflow:hidden;
white-space:nowrap;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.shop-detail-user{
display: flex;
flex-direction: row;
align-items: center;
overflow:hidden;
white-space:nowrap;
font-size: 24rpx;
height: 26rpx;
margin: 10rpx 0 10rpx 0;
text-overflow: ellipsis;
width: 100%;
}
.imagecont{
width: 100%;
font-size: 0;
position: relative;
}
.prodimg {
width: 100% !important;
vertical-align: middle !important;
border-radius: 10rpx !important;
position: absolute !important;
font-size:0 !important;
}
/* 盒子水平摆放并垂直居中 */
.flex-row-center{
display: flex;
flex-direction: row;
align-items: center;
}这篇对您有所帮助的话，来个点赞或关注吧❀❀~，另外要预览效果的可以搜索邑学宝微信小程序呦~