实现小红书响应式瀑布流

前言

瀑布流布局，不管是在pc端还是手机端都很常见，但是我们通常都是列固定。今天来实现一下小红书的响应式瀑布流。后面有仓库地址。

正文

还是先来看看效果

原理：

对每一个item都使用绝对定位，left和top都是0，最后根据容器大小、item的height通过计算来确定item的transform值

接下来从易到难来解析一下实现

初始化数据

列表怎么可以没有数据，先来初始化一下数据

确定列数及列大小

由于是响应式，我们要去监听列表容器的大小变化并记录容器宽度，这样才能做出相应的处理

根据监听得到的容器大小信息，我们可以确定每行个数和每一个item的宽度

确定列表中item位置

确定item的位置，那么我们只需要确定transform值就可以了，这也是整个实现的核心。我们还需要解决几个问题

item放置的原理图，放置在当前最低高度的下面

更新item高度

当我们第一次运行的时候，每一个item的高度一定都是随机生成的，现在我们要确定item的实际高度。在这里我们还可优化一下，使用懒加载和底部加载，提升性能。这两个在这里就不讲了，不懂的可以去搜一下。

下面代码一共两个作用

根据滚动值判断是否加载图片，加载图片后触发父亲更新高度函数

父亲接受到新的高度并更新高度，然后去重新计算transform值和item高度

完整代码

仓库地址

结语

感兴趣的可以去试试