介紹

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>

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

ol有序列表

<code>

  

    
Loading data…

  

/<code>

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

ul

<code>
 

  

    
Loading data…

  

/<code>

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

div

<code>

  

    
Loading data…

  

/<code>

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

總結

Clusterize.js是一個原生的用於大數據量展示的插件，其渲染機制極大的提升了性能，如果你需要在前端Web頁面展示海量數據列表，不妨試一試！

閱讀更多 最美分享Coder 的文章

關鍵字: 數據量 插件 HTML