參考： https://segmentfault.com/a/1190000012621936
思路：
1.第一行正常排列。
2.第二行開始，使用絕對定位。找到第一行中高度最小的元素節點，進行定位。然後依次排列下去。
效果：
代碼：
<!--pages/pubu/pubu.wxml-->
<view class="container">
<block wx:for="{{list}}" wx:key="{{index}}">
<view class="aaa {{item.isPubu ? 'position' : ''}}" style="height:{{item.height}}rpx;left:{{item.left*2}}rpx;top:{{item.top*2}}rpx;">
<icon type="success"></icon>
<view>{{index+1}}</view>
</view>
</block>
</view>
/* pages/pubu/pubu.wxss */
.container {
position: relative;
border: 1rpx solid green;
}
.item {
/* box-sizing: border-box; */
float: left;
width: 187rpx;
text-align: center;
/* padding: 5rpx; */
border: 1rpx solid red;
}
.aaa {
box-sizing: border-box;
float: left;
width: 187rpx;
height: 100rpx;
text-align: center;
border: 1rpx solid red;
}
.position{
position: absolute;
}
// pages/pubu/pubu.js
Page({
/**
* 頁面的初始數據
*/
data: {
list: [],
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function(options) {
this.getList();
this.getAllRects();
},
getAllRects() {
var self = this;
//查詢所有的類名爲aaa的標籤：
wx.createSelectorQuery().selectAll('.aaa').boundingClientRect(function(rects) {
// console.warn(rects);
// rects.forEach(function (rect) {
// // rect.width // 節點的寬度
// // rect.height // 節點的高度
// console.warn(rect.height);
// })
//遍歷數組集合---》獲取的每個元素的高度
var rectsHeight = rects.map((value, index) => {
return value.height;
});
// console.warn(rectsHeight);
//存儲一行的高度，用來給下一行做絕對定位用的
var heightArr = [];
//遍歷數組集合
rects.map((value, index) => {
if (index < 4) {
//如果是第一行圖片，不需要設置定位，但是需要保存高度
heightArr.push(rectsHeight[index]);
} else {
//如果不是第一行圖片
//在高度數組中找到最小高度[當作這張圖片的top定位值]
var minHeight = Math.min.apply(null, heightArr);
//在高度數組中找到最小高度的下標
var minIndex = heightArr.indexOf(minHeight);
//根據找到的下標，然後找到這個最小的div，並獲取他的左定位[定位的left值]
// console.warn(minIndex);
// console.warn(rects[minIndex]);
var tempLeft = rects[minIndex].left;
var tempBottom = rects[minIndex].bottom;
// console.warn(tempLeft);
// console.warn(tempBottom);
//設置圖片的定位
var list = self.data.list;
list[index].left = tempLeft;
//第5個元素開始，取上一行整體高度的最小高度[定位的top值]
list[index].top = minHeight;
list[index].isPubu = true;
//將高度數組中最小的高度，累加到當前的高度上
heightArr[minIndex] = heightArr[minIndex] + rects[index].height;
self.setData({
list: list,
heightArr: heightArr
});
}
});
}).exec()
},
getList() {
var self = this;
var list = [{
'height': 420,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 370,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 400,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 450,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 310,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 330,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 390,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 400,
'isPubu': false,
'left': 0,
'top': 0,
}
];
var list2 = [{
'height': 360,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 220,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 280,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 300,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 310,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 230,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 290,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 300,
'isPubu': false,
'left': 0,
'top': 0,
}
];
list.push(...list2);
self.setData({
list: list
});
},
addList() {
var self = this;
var list = self.data.list;
var list2 = [{
'height': 360,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 220,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 280,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 300,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 310,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 230,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 290,
'isPubu': false,
'left': 0,
'top': 0,
},
{
'height': 300,
'isPubu': false,
'left': 0,
'top': 0,
}
];
list.push(...list2);
self.setData({
list: list
});
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function() {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function() {},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function() {
var self = this;
wx.showLoading({
title: '加載中',
})
setTimeout(function() {
console.warn('onReachBottom');
self.addList();
self.getAllRects();
wx.hideLoading();
}, 1200);
},
})
。。。