瀑布流的效果图如下：
1.wxml中的代码如下
<!--pages/lsittest/listtest.wxml-->
<view class="containers">
<view id="left">
<view style="margin-bottom:20rpx;" wx:for="{{leftList}}" wx:key>
<image src="{{item.url}}" mode='widthFix'></image>
<view class="title">
<text>{{item.title}}</text>
</view>
</view>
</view>
<view id="right">
<view style="margin-bottom:20rpx;" wx:for="{{rightList}}" wx:key>
<image src="{{item.url}}" mode='widthFix'></image>
<view class="title">
<text>{{item.title}}</text>
</view>
</view>
</view>
</view>
2.wxss代码如下
/* pages/lsittest/listtest.wxss */
#left{
width: 47%;
margin: 0 1% 0 2%;
float: left;
}
#right{
width: 47%;
margin: 0 2% 0 1%;
float: left;
}
#left image, #right image{
width: 100%;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
page{
padding: 20rpx 0;
background: #f5f5f5;
}
/* .containers{
padding: 20rpx 0;
background: #f5f5f5;
} */
.title{
background: #fff;
font-size: 26rpx;
color: #333;
margin-top: -5rpx;
line-height: 35rpx;
padding: 10rpx 15rpx 15rpx;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
3.js中的代码如下
// pages/lsittest/listtest.js
let leftHeight = 0,
rightHeight = 0; //分别定义左右两边的高度
let query;
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
title: '分别定义左右两边的高度',
url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
}, {
title: '分别定义左右两边的高度',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
}, {
title: '分别定义左右两边的高度分别定义左右两边的高度',
url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
}, {
title: '边的高度',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
}, {
title: '分别两边的高度',
url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg',
}, {
title: '分别定义左右两边的高度分别定义左右两边的高度分别定义左右两边的高度',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
}, {
title: '分别定义左右两边的高度边的高度',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
}, {
title: '边的高度边的高度',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
}, {
title: '边的高度边的高度边的高度',
url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'
}, {
title: '边的高度高度边的高的高度',
url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg'
}, {
title: '边的高度边的高度边的高度边的高度边的高度',
url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'
}, {
title: '边的高度',
url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'
}, {
title: '边的高度边的高度边的高度边的高度',
url: 'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',
}],
leftList: [],
rightList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.isLeft();
},
isLeft() {
const {
list,
leftList,
rightList
} = this.data;
query = wx.createSelectorQuery();
this.loopList(0)
},
loopList(index){
const {
list,
leftList,
rightList
} = this.data;
console.log(index)
if (!list[index]) return;
leftHeight <= rightHeight ? leftList.push(list[index]) : rightList.push(list[index]); //判断两边高度，来决定添加到那边
this.getBoxHeight(leftList, rightList).then(()=>{
this.loopList(++index)
})
},
getBoxHeight(leftList, rightList) { //获取左右两边高度
return new Promise((resolve, reject) => {
this.setData({
leftList,
rightList
}, () => {
query.select('#left').boundingClientRect();
query.select('#right').boundingClientRect();
query.exec((res) => {
leftHeight = res[0].height; //获取左边列表的高度
rightHeight = res[1].height; //获取右边列表的高度
resolve();
});
});
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
var dataList = this.data.list;
var index = this.data.list.length;
this.setData({
list: this.data.list.concat(dataList)
})
console.log("--------",this.data.list)
this.loopList(index)
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
4.亲测有效，如果对你有用请点个赞，非常感谢!!!
