传统的瀑布流布局实现一般关键是去计算每一列的高度,从而判断下一个元素应该插入到哪一列(当然是最短的那列)。
这个奇葩思路没有任何计算,主要思路如下:
- 在瀑布流容器底部加入一根细线
- 利用微信小程序的IntersectionObserver,为每一列和细线添加监听
- 逐个加入要插入的item元素
- 根据监听相交变化结果判断下一个item应该插入哪一列(简单来说就是插入到当前不与细线相交的那一列,因为比较短)
这个思路实际上就是把计算高度换成了监听判断哪列更高,因此也不必知道每个元素的高度。
目前只能支持两列布局的情况,如果列数更多我没办法不通过计算来知道哪列最短,如果有思路或想法的童鞋欢迎交流~
实现过程也比较简单,就分享个思路,不贴代码了(问就是懒!)
感兴趣的童鞋可以看代码片段,里面有完整的实现代码:
https://developers.weixin.qq.com/s/nH5pg4mE78dG
mark
节点溢出的问题如何解决呢,上千上万条数据加载,页面会崩吧
博主你第一个实现两列布局的demo在微信版本2.1.0下就会失效,可以看一下原因
谢谢你给我的灵感,谢谢,非常感谢
我这里就两个字,楼主太牛逼了
博主厉害
收藏,有空再研究研究,根据你的描述 + 我最近对瀑布流的研究 = 实现自定义列数应该没问题。
https://developers.weixin.qq.com/s/M3BCSdmp71db
厉害