1.概述
在實現瀑布流布局之前，首先，需要明白，大致需要實現的樣子，此處以兩列為例子：
如圖，瀑布流布局，是列寬一致，屏寬等分。而後續的**內容，排列在較短一列之後。
2.準備
我所理解的是：將**分成兩列渲染，當獲取資料後，把即將渲染的**內容放在較短列之後，以此實現瀑布流樣式的布局**資料依列渲染：
wxml**如下
<
!-- 外部容器 --
>
"box_group"
>
<
!-- 左列 --
>
="list left"
>
="group_msg" wx:
for=
"}">
"widthfix" src=
"}">
<
/image>
="msg_title"
>
}<
/view>
="msg_tips"
>id：
}<
/view>
<
/view>
<
/view>
<
!-- 右列 --
>
="list right"
>
="group_msg" wx:
for=
"}">
"widthfix" src=
"}">
<
/image>
="msg_title"
>
}<
/view>
="msg_tips"
>id：
}<
/view>
<
/view>
<
/view>
<
/view>
js**如下
data:
wxss**如下
#box_group
.list
.group_msg
.group_msg>image
在獲取資料之前，我們要實現在較短列新增**，首先需要清楚，哪一列是較短列：（獲取左右兩列的高度，判斷較短列）
/*判斷列高的方法*/
whichhigher()
); //也可返回實際的列高})
.exec()
;}).
exec()
;})}
boundingclientrect方法的處理函式是非同步執行，所以，在後續**中，**的執行順序會導致判斷時無法正常獲取到返回值，故此處返回了乙個promise物件，方便後續使用.then方法處理後續的判斷。
在渲染資料之前，此時我們的兩列對應陣列尚為空，而在獲取了要渲染的資料arr之後，就需要執行對資料的分類，即哪些資料在左邊，哪些在右邊：（通過每一次資料渲染，實時判斷較短列，再進行資料新增，渲染）
let _this=
this
;//儲存外部的this，用於獲取外部的方法whichhigher，以及data內的資料
let index=0;
//定義判斷遞迴的初始變數
(function
showdata()
else
if(res===
'right'
)else
/*實時渲染*/
_this.
setdata()
/*進行遞迴*/
index++
;//遞迴條件自增
if(index
showdata()
;//遞迴終止判斷})
})()
//匿名函式自執行
特此記錄，供來日參考
微信小程式實現瀑布流布局
瀑布流布局主要將大小不一的按等寬格式向下鋪滿。先分析，主要實現方式可以是將左右兩列劃分為兩個陣列儲存，每次新增時判斷兩側高度，並將新增到高度較低的陣列中。query wx.createselectorquery query.select left boundingclientrect query.e...
WxMasonry微信小程式瀑布流布局模式
雖然實現方式很簡單，但是我起初沒有想到，也是繞了很遠的路才想到。當你看到下面的解決方案的時候，請不要說我sb，因為我確實是沒有想起來，太久沒有學習前端知識，很多屬性基本沒有見過。如果熟悉css3的朋友可能一下子就想起來了，但是我並沒有 我是繞了一大圈才想起來 wxmasonryview wxmaso...
微信小程式瀑布流布局無限載入
1.在html中動態載入 表示筆者並沒有嘗試過，記在這裡可以試試 通常使用new image 建立乙個物件，然後通過動態載入url指向，並獲取資訊。來實現一下 首先來做乙個兩列的布局 然後要在頁面上放乙個隱藏的區域，用它來獲取的高度 loadimages function let baseid im...