介绍

Clusterize.js是一个轻量级的原生大数据量展示插件，主要思想不是用所有使用的标签污染DOM。取而代之的是，它将列表拆分为簇，然后显示当前滚动位置的元素，并在列表的顶部和底部添加额外的行以模拟表格的全高，以便浏览器将滚动条显示为完整列表。

Github

适用HTML元素

不仅仅适用于table元素，也同样适用于div、有序列表、无序列表等等，基本上，它几乎是你想要的任何标签

安装使用安装

bower install clusterize

npm install clusterize.js

<link href="./clusterize.css" rel="stylesheet"><script src="./clusterize.min.js"></script>

表格

<!--HTML--><div class="clusterize">  <table>    <thead>      <tr>        <th>Headers</th>      </tr>    </thead>  </table>  <div id="scrollArea" class="clusterize-scroll">    <table>      <tbody id="contentArea" class="clusterize-content">        <tr class="clusterize-no-data">          <td>Loading data…</td>        </tr>      </tbody>    </table>  </div></div>

// JavaScriptvar data = ['<tr>…</tr>', '<tr>…</tr>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

ol有序列表

<!--HTML--><div id="scrollArea" class="clusterize-scroll">  <ol id="contentArea" class="clusterize-content">    <li class="clusterize-no-data">Loading data…</li>  </ol></div>

// JavaScriptvar data = ['<li>…</li>', '<li>…</li>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

ul

<!--HTML--><div id="scrollArea" class="clusterize-scroll">  <ul id="contentArea" class="clusterize-content">    <li class="clusterize-no-data">Loading data…</li>  </ul></div>

// JavaScriptvar data = ['<li>…</li>', '<li>…</li>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

div

<!--HTML--><div id="scrollArea" class="clusterize-scroll">  <div id="contentArea" class="clusterize-content">    <div class="clusterize-no-data">Loading data…</div>  </div></div>

// JavaScriptvar data = ['<div>…</div>', '<div>…</div>', …];var clusterize = new Clusterize({  rows: data,  scrollId: 'scrollArea',  contentId: 'contentArea'});

Clusterize.js是一个原生的用于大数据量展示的插件，其渲染机制极大的提升了性能，如果你需要在前端Web页面展示海量数据列表，不妨试一试！