三行代码实现完美瀑布流

2,972 阅读3分钟

需求

最近准备做一个瀑布流的需求,这里每个卡片的高度是不固定的,有点类似下图这样的。

难点

  1. 如果绝对定位,如何定位每个卡片的位置。 因为可以发现需求里边的每个卡片的高度都是不固定的,所以如果想使用绝对定位的话,需要实时动态的计算每个卡片的left、top,这里会涉及大量的计算。

因为每个卡片的高度是不固定,所以如果想要计算left、top,必须首先获取卡片的高度,但是卡片里边不仅包含图片,还有文字,这个时候计算高度是比较困难的。

  1. 如何结合虚拟列表实现瀑布流

这个时候必须要根据scrollTop的位置,判断什么时候需要加载哪些数据,判断可视区域里边数据的起始索引以及结束索引,这里同样会涉及大量的计算,同时还因为每个卡片的高度不固定,甚至只有图片和文字加载到浏览器以后,才能得到真实的高度,这样会更困难。

解决方案

解决方案1

  1. 如果绝对定位,如何定位每个卡片的位置。

1.1 后端计算 后端可以先把每个图片的高度和宽度提前计算好,直接返回给前端进行处理,然后前端根据后端返回的图片高度和宽度,然后再动态的计算出每个卡片的高度(文字部分也可以固定高度,使用省略号实现)。

1.2 前端计算

前端计算还是比较麻烦的,需要先等卡片组件加载完成,才能得到宽度和高度,而且因为数据量比较大,每个卡片计算出来以后,还需要去根据计算出来的结果去更新left、top,会非常麻烦。 这里可以采用node作为中间层进行计算,还是使用类似后端计算的思路。

还有一种方法是使用observe api 动态观察每个卡片,当观察到卡片加载完成后,再动态根据卡片的宽度和高度计算,不过这样同样很麻烦。

  1. 如何结合虚拟列表实现瀑布流

这里因为卡片的高度是不固定的,同时也是瀑布流,所以不能使用react-window 来解决,不过可以使用react-window的类似思路,自己封装一个npm 包,根据scroll事件判断需要加载那些数据。

解决方案2

使用css3的columns来实现,该技术解决方案不需要计算高度,也不需要去定位,但是columns这个属性会把卡片高度给切开 如下图:

不过可以使用下面代码来解决,


.test {
  // color: red;
  // height: 2000px;
  background-color: red;
  gap: 1rem;
  columns: 5;
  .no-break {
    break-inside: avoid;
  }
}

效果如下: