Wordbox是一个很小的jQuery插件，它从JS数组中提取单词（标签），并将它们转换为响应二维网格风格的标签云。

标签云可以动态调整自身大小以适应给定的区域，并在每次重新加载页面时随机排列标签。

参见：

• JavaScript中的10个最佳标记云生成器

如何使用它:

1.下载zip并在页面上包含Wordbox插件的文件。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>

<!-- jQuery Wordbox Plugin -->
<link rel="stylesheet" href="/path/to/dist/wordbox.css" />
<script src="/path/to/dist/wordbox.js"></script>

2.为标签云创建HTML。

<div class="grid-wrap">
  <div id="myTagsCloud" class="wordbox"></div>
</div>

.grid-wrap {
  min-width: 400px;
  width: 100%;
  height: 400px;
}

3.在JS数组中定义您的标签，如下所示：

let words = [
    {
      'title': 'jQueryScript',
      'url': 'https://www.jqueryscript.net'
    },
    {
      'title': 'CSSScript',
      'url': 'https://www.cssscript.com'
    },
    // more tags here
]

4.定义JS数组中标签的背景颜色如下：

let myColors = ['#F46779', '#045DA4']

5.初始化插件，在您刚刚创建的容器中生成一个响应标签云：

let tc = new dodoroy.WordBox('#myTagsCloud', {
    words: words,
    colors: myColors,
    isFixedWidth: false,
})

6.创建一个总是首先显示在标记云中的“前导”标记。

let tc = new dodoroy.WordBox('#myTagsCloud', {
    words: words,
    colors: myColors,
    isFixedWidth: false,
    isLead: true,
    leadWord: {
      'title': 'jQueryScript', 
      'url': 'https://www.jqueryscript.net/'
    },
})

7.指定此标记云的宽度和高度。

let tc = new dodoroy.WordBox('#myTagsCloud', {
    words: words,
    colors: myColors,
    isFixedWidth: true,
    width: 1000,
    height: 200,
})

预览截图

响应式标记云（网格）插件 jQuery Wordbox