小程序瀑布流的一种实现
在小程序中由于图片组件为固定宽高,所以无法像网页中一样简单的实现瀑布流布局
但是image组件可以设置mode为widthFix,为图片设置固定高度后,可以自适应高度
如果是两栏瀑布流布局
就先定义两个view,让其float: left(高度不会随父组件高度)
获取到新数据后,循环新数据,<span style="font-size: 16px;">通过 wx.createSelectorQuery() 获取两个view的高度,将数据中的一项push入矮的一项</span>
不断循环添加子项就能够达到瀑布流的效果
注意事项:
在瀑布流最后的外面要清除浮动,防止影响后面的布局
在设置单项时,要在setData的回调方法中再去执行下一项,保证能够让下次获取的高度正确
最后效果如下