小程序瀑布流的一种实现
发布于 2 年前 作者 dye 3988 次浏览 来自 分享

在小程序中由于图片组件为固定宽高,所以无法像网页中一样简单的实现瀑布流布局

但是image组件可以设置mode为widthFix,为图片设置固定高度后,可以自适应高度

如果是两栏瀑布流布局

就先定义两个view,让其float: left(高度不会随父组件高度)

获取到新数据后,循环新数据,<span style="font-size: 16px;">通过 wx.createSelectorQuery() 获取两个view的高度,将数据中的一项push入矮的一项</span>

不断循环添加子项就能够达到瀑布流的效果

注意事项:

在瀑布流最后的外面要清除浮动,防止影响后面的布局

在设置单项时,要在setData的回调方法中再去执行下一项,保证能够让下次获取的高度正确

最后效果如下

代码片段:https://developers.weixin.qq.com/s/d9MnuWmw7WGm

回到顶部