评论

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

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

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

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

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

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

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

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

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

最后一次编辑于  11-23  
点赞 3
收藏
评论

4 个评论

  • 梓熹
    梓熹
    星期一 10:42

    博主厉害

    星期一 10:42
    赞同
    回复
  • 宣华 
    宣华 
    11-25

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

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

    厉害

    11-24
    赞同
    回复
  • 假装在上海
    假装在上海
    11-23
    牛逼
    11-23
    赞同
    回复