一个奇葩思路实现的瀑布流双列布局
发布于 5 年前 作者 minzhong 2520 次浏览 来自 分享

传统的瀑布流布局实现一般关键是去计算每一列的高度,从而判断下一个元素应该插入到哪一列(当然是最短的那列)。

这个奇葩思路没有任何计算,主要思路如下:

  1. 在瀑布流容器底部加入一根细线
  2. 利用微信小程序的IntersectionObserver,为每一列和细线添加监听
  3. 逐个加入要插入的item元素
  4. 根据监听相交变化结果判断下一个item应该插入哪一列(简单来说就是插入到当前不与细线相交的那一列,因为比较短)

这个思路实际上就是把计算高度换成了监听判断哪列更高,因此也不必知道每个元素的高度。

目前只能支持两列布局的情况,如果列数更多我没办法不通过计算来知道哪列最短,如果有思路或想法的童鞋欢迎交流~

实现过程也比较简单,就分享个思路,不贴代码了(问就是懒!)

感兴趣的童鞋可以看代码片段,里面有完整的实现代码:
https://developers.weixin.qq.com/s/nH5pg4mE78dG

8 回复

节点溢出的问题如何解决呢,上千上万条数据加载,页面会崩吧

谢谢你给我的灵感,谢谢,非常感谢

博主你第一个实现两列布局的demo在微信版本2.1.0下就会失效,可以看一下原因

我这里就两个字,楼主太牛逼了

收藏,有空再研究研究,根据你的描述 + 我最近对瀑布流的研究 = 实现自定义列数应该没问题。

回到顶部