仿攜程微信小程序瀑布流

1.png
加載完成.png

遇到問題:
1、根據(jù)奇偶性分的話,可能會出現(xiàn)一邊長、一邊短的情況.
2、加載新的數(shù)據(jù)setData的時候,由于位置還沒計(jì)算出來,因此,第二頁會覆蓋我第一頁經(jīng)過計(jì)算的item圖
解決方案
1、
1)左邊的一列和右邊的一列高度對比 差值為thosed
2)如果左邊的minH<thosed/2 ,則移動minH到右邊,直到minH >=thosed/2 ;反之亦然
在這一步標(biāo)志奇偶isLeft.
3)移動了之后左邊就變成右邊,右邊就變成左邊,因此不能根據(jù)key的奇偶性來判斷,應(yīng)該由
一個isLeft來確定,因此要加多一個標(biāo)志。
2、在setData之前,把下一頁的繪制計(jì)算移出屏幕外面(top:-100%),計(jì)算成功之后再移動回來。

3、為了更好的用戶體驗(yàn),強(qiáng)烈建議圖片的寬高由后臺返回。

第二種實(shí)現(xiàn)瀑布流的思路
1、采用左右兩列布局,使用后臺返回來的圖片數(shù)據(jù)
2、動態(tài)計(jì)算對比左右兩列的高度,以便決定其在哪一列
3、第二種思路代碼可借鑒:http://www.itdecent.cn/p/c7c2b5c425bc

第一種思路代碼:
https://developers.weixin.qq.com/s/3wmCZhmg75kR

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容