在小程序中由于图片组件为固定宽高,所以无法像网页中一样简单的实现瀑布流布局
但是image组件可以设置mode为widthFix,为图片设置固定高度后,可以自适应高度
如果是两栏瀑布流布局
就先定义两个view,让其float: left(高度不会随父组件高度)
获取到新数据后,循环新数据,通过 wx.createSelectorQuery() 获取两个view的高度,将数据中的一项push入矮的一项
不断循环添加子项就能够达到瀑布流的效果
注意事项:
在瀑布流最后的外面要清除浮动,防止影响后面的布局
在设置单项时,要在setData的回调方法中再去执行下一项,保证能够让下次获取的高度正确
最后效果如下
不错
小程序已经支持瀑布流啦,推荐试试
https://developers.weixin.qq.com/community/develop/article/doc/000a088c5c471062bf0f0af1a5b813