基于Clusterize.js，适合于MVVM框架展示超长列表。
对于长列表，一般的应用可以通过分页解决。然而现在很多的应用列表部分可能是滚动加载的，随着滚动，列表项越来越多，影响性能，尤其是移动设备上；另一种是IM应用，像会话列表、好友列表、群成员列表通常会一次性加载。在这些情况下，对于长列表的优化就显得很有必要。
Clusterize.js就是这样一个库，短小精悍。它会将列表划分成一个个的cluster，随着滚动显示可见的cluster，并在列表的顶部和底部填充额外的高度，展示列表的真实高度。
不过Clusterize.js是基于DOM的，随着MVVM框架的流行，大家更多的是在操作数据，所以基于Clusterize.js做了Clustery.js。
首先了解一下Clusterize.js。
参数和Clusterize.js基本一致，不过rows此时是必须传入的，不再是DOM列表，而是要渲染列表的数组。另外增加一个参数item_height，必须显示的指定每一项的高度。去掉了show_no_data_row、no_data_text、no_data_class、keep_parity、tag等配置。
callbacks也只剩下一个回调：shouldUpdate，在此回调里得到data，更新UI。data可能是一个对象，也可能只是一个数字（仅仅是bottomHeight），若是对象，data数据结构如下：
{
start: 0, // 渲染列表从start到end, 此时需要渲染arr.slice(start, end)
end: 80,
top_offset: 1245, // 列表顶部填充高度
bottom_offset: 3349 // 列表底部填充高度
}列表数据源更新后, 记得update一下~
下面是所有的配置项、回调和公共方法：
this.clustery = new Clustery({
scrollElem: scrollElem,
contentElem: contentElem,
rows: rows,
item_height: itemHeight,
rows_in_block: 20,
blocks_in_cluster: 4,
callbacks: {
shouldUpdate: function(data) {
_this.setRenderData(data)
}
}
});
// if you want to destroy
this.clustery.destroy();
// if you modify itemHeight manually
this.clustery.refresh(item_height);
// if you update data
this.clustery.update(newRows);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent