一个奇葩思路实现的瀑布流双列布局
传统的瀑布流布局实现一般关键是去计算每一列的高度,从而判断下一个元素应该插入到哪一列(当然是最短的那列)。
这个奇葩思路没有任何计算,主要思路如下:
- 在瀑布流容器底部加入一根细线
- 利用微信小程序的IntersectionObserver,为每一列和细线添加监听
- 逐个加入要插入的item元素
- 根据监听相交变化结果判断下一个item应该插入哪一列(简单来说就是插入到当前不与细线相交的那一列,因为比较短)
这个思路实际上就是把计算高度换成了监听判断哪列更高,因此也不必知道每个元素的高度。
目前只能支持两列布局的情况,如果列数更多我没办法不通过计算来知道哪列最短,如果有思路或想法的童鞋欢迎交流~
实现过程也比较简单,就分享个思路,不贴代码了(问就是懒!)
感兴趣的童鞋可以看代码片段,里面有完整的实现代码:
https://developers.weixin.qq.com/s/nH5pg4mE78dG