本文原文地址: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插件的更多相关文章

  1. 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit

    来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...

  2. 写一个限制上传文件大小和格式的jQuery插件

    在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态&quo ...

  3. 前端表单标签form 及 简单应用

    今日内容 form 表单(重点) 后端框架之 flask 简介 内容详细 form 表单 1.作用 form 表单可以在前端获取用户输入的数据并发送给后端(服务端) 2.input 标签 获取用户数据 ...

  4. 基于纯 CSS3 技术实现美观的标签云效果

    标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...

  5. 3D球状标签云(兼容IE8)

    看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...

  6. 设计一种前端数据延迟加载的jQuery插件(2)

    背景 最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示. 好处显而易见,可以减少前端对于图片的Http请求, ...

  7. python3生成标签云

    标签云是现在大数据里面最喜欢使用的一种展现方式,其中在python3下也能实现标签云的效果,贴图如下: -------------------进入正文--------------------- 首先要 ...

  8. Python pytagcloud 中文分词 生成标签云 系列(一)

    转载地址:https://zhuanlan.zhihu.com/p/20432734工具 Python 2.7 (前几天试了试 Scrapy 所以用的 py2 .血泪的教训告诉我们能用 py3 千万别 ...

  9. 做一个能对标阿里云的前端APM工具(下)

    上篇请访问这里做一个能对标阿里云的前端APM工具(上) 样本多样性问题 上一小节中的实施方案是微观的,即单次性的.具体的.但是从宏观上看,我需要保证性能测试是公允的,符合大众预期的.为了达到这种效果, ...

随机推荐

  1. POJ2456 Aggressive cows 2017-05-11 17:54 38人阅读 评论(0) 收藏

    Aggressive cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13993   Accepted: 6775 ...

  2. android免root hook框架legend

    一.前言 Android中hook框架已经非常多了,最优秀的当属Xposed和Substrate了,这两个框架我在之前的文章都详细介绍过了,不了解的同学,可以转战这里:http://www.wjdia ...

  3. hdu 4946 凸包注意重点

    http://acm.hdu.edu.cn/showproblem.php?pid=4946 给你n个点的坐标和速度,如果一个点能够到达无穷远处,且花费的时间是最少的,则此点输出1,否则输出0. 每个 ...

  4. POJ1556 最短路 + 线段相交问题

    POJ1556 题目大意:比较明显的题目,在一个房间中有几堵墙,直着走,问你从(0,5)到(10,5)的最短路是多少 求最短路问题,唯一变化的就是边的获取,需要我们获取边,这就需要判断我们想要走的这条 ...

  5. Latex中Matlab代码的环境

    需要用到listings宏包 使用方法: 导言区\usepackage{listings}\lstset{language=Matlab}      %代码语言使用的是matlab\lstset{br ...

  6. <context:component-scan>自动扫描

    主要讲解自动扫描的<context:component-scan>中的2个子标签的使用方法 在Spring MVC中的配置中一般会遇到这两个标签,作为<context:compone ...

  7. asp.net mvc5 分析器错误消息: 未能加载类型“XXX.MvcApplication”

    描述 今天忽然碰到一个这个错误: “/”应用程序中的服务器错误. 分析器错误 说明: 在分析向此请求提供服务所需资源时出错.请检查下列特定分析错误详细信息并适当地修改源文件. 分析器错误消息: 未能加 ...

  8. C#DataGridView的简单使用

    首先创建一个DataGridView控件,然后创建列(包括列名的定义), 由于我不是和数据库进行连接,只是为了输出好看一点. 删除所有数据: while (this.dataGridView1.Row ...

  9. 将GridView的数据导出Excel

    HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename ...

  10. SPOJ Longest Common Substring II

    题目连接:戳我 题目大意:求n个字符串的最长公共子串. 它的简化版--这里 当然我们可以用SA写qwq,也可以用广义SAM写qwq 这里介绍纯SAM的写法...就是对其中一个建立后缀自动机,然后剩下的 ...