评论

一个奇葩思路实现的瀑布流双列布局

利用 IntersectionObserver 实现瀑布流双列布局

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

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

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

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

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

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

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

点赞 11
收藏
评论

8 个评论

  • 子非🐟
    子非🐟
    2020-03-08

    mark

    2020-03-08
    赞同
    回复
  • 九千七
    九千七
    2020-01-07

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

    2020-01-07
    赞同
    回复 4
    • 梧桐树
      梧桐树
      2020-01-07
      节点溢出是另外一个课题了,可以参考https://github.com/wechat-miniprogram/recycle-view这个思路,最简单的就是抽象节点不在屏幕内用空节点代替,还满足不了就分页吧,个人愚见
      2020-01-07
      回复
    • 九千七
      九千七
      2020-01-07回复梧桐树
      我目前的处理方式是,显示当前与上下2屏幕的内容,超出部分使用空节点占位,可是数据达到2千多条的话空白节点过多,还是会导致节点被回收的问题
      2020-01-07
      回复
    • 梧桐树
      梧桐树
      2020-01-07
      哇,你们这个场景数据好多啊,可以适当分页,我们电商长列表没有做任何优化实际使用中都没有出现溢出。。。
      2020-01-07
      回复
    • 九千七
      九千七
      2020-01-07回复梧桐树
      已经做了数组分页,就是数据太多,无限加载到2千多条就崩了,头疼
      2020-01-07
      回复
  • Jhinnn
    Jhinnn
    2020-01-06

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

    2020-01-06
    赞同
    回复 2
    • 梧桐树
      梧桐树
      2020-01-06
      看了一下也不知道是什么原因[捂脸],监听事件也没有触发,官方说法是1.9.3以上就支持了,这里只是提供一个思路,实际项目中使用还是建议自己写一下测试一下比较稳哈
      2020-01-06
      回复
    • Jhinnn
      Jhinnn
      2020-01-06回复梧桐树
      嗯嗯,但是你另外一个实现多列的demo里面的瀑布流不存在这个问题,不知道两者写法有什么区别。
      2020-01-06
      回复
  • 孑
    2019-12-24

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

    2019-12-24
    赞同
    回复
  • 白俊鹏
    白俊鹏
    2019-12-18

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

    2019-12-18
    赞同
    回复
  • 2019-12-09

    博主厉害

    2019-12-09
    赞同
    回复
  • 宣华 
    宣华 
    2019-11-25

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

    2019-11-25
    赞同
    回复 1
  • 五六七
    五六七
    2019-11-24

    厉害

    2019-11-24
    赞同
    回复
登录 后发表内容