实现小红书响应式瀑布流
站长
· 阅读数 2
前言
瀑布流布局，不管是在pc端还是手机端都很常见，但是我们通常都是列固定。今天来实现一下小红书的响应式瀑布流。后面有仓库地址。
正文
还是先来看看效果
原理：
对每一个item都使用绝对定位，left和top都是0，最后根据容器大小、item的height通过计算来确定item的transform值
接下来从易到难来解析一下实现
初始化数据
列表怎么可以没有数据，先来初始化一下数据
确定列数及列大小
由于是响应式，我们要去监听列表容器的大小变化并记录容器宽度，这样才能做出相应的处理
根据监听得到的容器大小信息，我们可以确定每行个数和每一个item的宽度
确定列表中item位置
确定item的位置，那么我们只需要确定transform值就可以了，这也是整个实现的核心。我们还需要解决几个问题
- 对还不知道item的高度，怎么确定
- 我们希望把新的item放置在最低高度的旧item下方，这样全部渲染完每一列的高度才不会相差很多。
item放置的原理图，放置在当前最低高度的下面
更新item高度
当我们第一次运行的时候，每一个item的高度一定都是随机生成的，现在我们要确定item的实际高度。在这里我们还可优化一下，使用懒加载和底部加载，提升性能。这两个在这里就不讲了，不懂的可以去搜一下。
下面代码一共两个作用
- 记录容器滚动值，传递给每一个
item，用于判断是否加载图片。 - 判断是否请求添加数据
根据滚动值判断是否加载图片，加载图片后触发父亲更新高度函数
父亲接受到新的高度并更新高度，然后去重新计算transform值和item高度
完整代码
结语
感兴趣的可以去试试