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>
JQCloud: 一个前端生成美化标签云的简单JQuery插件的更多相关文章
- 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit
		来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ... 
- 写一个限制上传文件大小和格式的jQuery插件
		在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态&quo ... 
- 前端表单标签form 及 简单应用
		今日内容 form 表单(重点) 后端框架之 flask 简介 内容详细 form 表单 1.作用 form 表单可以在前端获取用户输入的数据并发送给后端(服务端) 2.input 标签 获取用户数据 ... 
- 基于纯 CSS3 技术实现美观的标签云效果
		标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ... 
- 3D球状标签云(兼容IE8)
		看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ... 
- 设计一种前端数据延迟加载的jQuery插件(2)
		背景 最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示. 好处显而易见,可以减少前端对于图片的Http请求, ... 
- python3生成标签云
		标签云是现在大数据里面最喜欢使用的一种展现方式,其中在python3下也能实现标签云的效果,贴图如下: -------------------进入正文--------------------- 首先要 ... 
- Python pytagcloud 中文分词 生成标签云 系列(一)
		转载地址:https://zhuanlan.zhihu.com/p/20432734工具 Python 2.7 (前几天试了试 Scrapy 所以用的 py2 .血泪的教训告诉我们能用 py3 千万别 ... 
- 做一个能对标阿里云的前端APM工具(下)
		上篇请访问这里做一个能对标阿里云的前端APM工具(上) 样本多样性问题 上一小节中的实施方案是微观的,即单次性的.具体的.但是从宏观上看,我需要保证性能测试是公允的,符合大众预期的.为了达到这种效果, ... 
随机推荐
- 无限存储之胖文本数据库TTD(Thick Text Database)
			无限存储之胖文本数据库TTD(Thick Text Database) 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com 所谓的“胖”就是多.大.丰富的意思,像我们平时看到的 ... 
- Jack Clark 的几句名言
			Grateful for everything; entitled to nothing. 沒有任何事情是你不该感激的:沒有任何东西是你该派得到的. Leadership is the ability ... 
- Oracle SQL Trace 和 10046 事件
			http://blog.csdn.net/tianlesoftware/article/details/5857023 一. SQL_TRACE 当SQL语句出现性能问题时,我们可以用SQL_TRAC ... 
- .net4.0重新注册IIS 的方法
			操作步骤如下: 1.开始 2.运行 3.cmd 4.cd C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319 5.aspnet_regiis.exe -i 
- 解决使用ICsharpCode解压缩时候报错Size MisMatch4294967295;的错误
			如果是一个文件夹生成的zip文件,解压缩时候不会报错. 如果是一个文件夹里面包含着两个子文件夹,而且每个子文件夹里面都有着文件.生成的zip文件在解压时候就出报这个错误. 具体的解决办法,通过网上搜索 ... 
- 利用bootstrap上传视频文件,mvc做后台处理
			@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ... 
- 使用cropper插件进行图片裁剪 并上传
			cropper插件的使用和 github地址: github 官方实例 我参考的中文文档: https://www.cnblogs.com/baka-sky/p/8001577.html 因为我是.n ... 
- java 附件上传、下载前后端代码
			前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ... 
- poj3070矩阵快速幂求斐波那契数列
			Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13172 Accepted: 9368 Desc ... 
- MySQL数据库中的字段类型varchar和char的主要区别是什么?哪种字段查找效率要高?
			1,varchar与char的区别?(1)区别一,定长和变长,char表示定长,长度固定:varchar表示变长,长度可变.当插入字符串超出长度时,视情况来处理,如果是严格模式,则会拒绝插入并提示错误 ... 
