介紹
Clusterize.js是一個輕量級的原生大數據量展示插件，主要思想不是用所有使用的標籤汙染DOM。取而代之的是，它將列表拆分為簇，然後顯示當前滾動位置的元素，並在列表的頂部和底部添加額外的行以模擬表格的全高，以便瀏覽器將滾動條顯示為完整列表。
Github
https://github.com/NeXTs/Clusterize.js
適用HTML元素
不僅僅適用於table元素，也同樣適用於div、有序列表、無序列表等等，基本上，它幾乎是你想要的任何標籤
安裝使用
安裝<code>bower install clusterize/<code>
<code>npm install clusterize.js/<code>
<code><link>
/<code>代碼示例
表格
<code>
<table>
<thead>
Headers
/<thead>
/<table>
<table>
<tbody>
Loading data…
/<tbody>
/<table>
<code>// JavaScript
var data = ['…', '…', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});/<code>
ol有序列表
<code>
Loading data…
<code>// JavaScript
var data = ['…', '…', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});/<code>
ul
<code>
Loading data…
<code>// JavaScript
var data = ['…', '…', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});/<code>
div
<code>
<code>// JavaScript
var data = ['
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});/<code>
總結
Clusterize.js是一個原生的用於大數據量展示的插件，其渲染機制極大的提升了性能，如果你需要在前端Web頁面展示海量數據列表，不妨試一試！