JQCloud: 一個前端生成美化標簽雲的簡單JQuery插件

本文原文地址：https://jiang-hao.com/articles/2018/frontend-JQCloud.html

 

因為博客需要，發現了一個生成美化簡約風格的標簽雲的JQuery插件。

官網地址：http://mistic100.github.io/jQCloud/index.html

使用方法很簡單，可以把JS和CSS文件下載到本地，也可以直接通過Script標簽src=“”的方法在線引用。

具體的使用方法官網都能查到。

 

頁面效果展示：https://jiang-hao.com/tags/

靜態的效果大概是這樣：

 

貼出自己微博使用JQCloud的前端代碼：

 

<script src="{{ SITEURL }}/theme/jqcloud.js"></script> <link href="{{ SITEURL }}/theme/jqcloud.css" rel="stylesheet"> <script> var words = []; {% for tag, articles in tags|sort %} words.push({text: "{{tag}}", weight: Math.random(), link: '{{ SITEURL }}/{{ tag.url }}'}); {% endfor %} {% for category, articles in categories %} words.push({text: "{{category}}", weight: Math.random(), link: '{{ SITEURL }}/{{ category.url }}'}); {% endfor %} $(function() { $("#tagcloud").jQCloud(words, { autoResize: true }); }); </script> <div id="tagcloud" style="width: 80%; height: 450px; align-self: center;"></div>

需要注意的是要包含標簽雲的div模塊需要顯示指定width和height，否則需要在JavaScript中進行相關設置。 

踩坑1：因為要基於JQuery，注意引用的JQuery庫可用。由於之前引用的是外網谷歌的庫，國內被牆導致標簽雲一直沒有刷出來，后來換成了bootcdn的JQuery庫就成功了：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>