开源的长列表渲染库-Clusterize.js

主流开源库实现长列表渲染的方式大同小异，除了决定渲染哪些元素的方式有一些不同外，其最大的区别在于如何将渲染出来的列表元素合理的放置在可视区域中。

Clusterize.js

Clusterize.js 基于 Vanilla.js (原生 JavaScript) ，用于在前端高效地展示大型数据集中的数据�。

渲染思路

Clusterize.js 将数据源划分成了一块一块的「Cluster」。初次渲染时，Clusterize.js 会根据第一个 Cluster 具备的高度计算出整个列表的初始高度，并在列表下方使用 placeholder 撑开整个列表。每次渲染时，Clusterize.js 会渲染足够多的 Cluster 以覆盖可见区域。在当前 Cluster 离开可见区域后，该 Cluster 的高度会被添加到 .clusterize-top-space 上；同时，新渲染的 Cluster 的高度会从 .clusterize-bottom-space 上减掉。DOM 结构大致如下图：

Clusterize.js

Clusterize.js 是如何处理动态高度元素的？

Clusterize.js 强烈建议使用统一高度的数据项，但是由于其使用的渲染方式比较特别，即便是高度不一的数据项也不会产生太大问题。