本文原文地址: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. 无限存储之胖文本数据库TTD(Thick Text Database)

    无限存储之胖文本数据库TTD(Thick Text Database) 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com 所谓的“胖”就是多.大.丰富的意思,像我们平时看到的 ...

  2. Jack Clark 的几句名言

    Grateful for everything; entitled to nothing. 沒有任何事情是你不该感激的:沒有任何东西是你该派得到的. Leadership is the ability ...

  3. Oracle SQL Trace 和 10046 事件

    http://blog.csdn.net/tianlesoftware/article/details/5857023 一. SQL_TRACE 当SQL语句出现性能问题时,我们可以用SQL_TRAC ...

  4. .net4.0重新注册IIS 的方法

    操作步骤如下: 1.开始 2.运行 3.cmd 4.cd C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319 5.aspnet_regiis.exe -i

  5. 解决使用ICsharpCode解压缩时候报错Size MisMatch4294967295;的错误

    如果是一个文件夹生成的zip文件,解压缩时候不会报错. 如果是一个文件夹里面包含着两个子文件夹,而且每个子文件夹里面都有着文件.生成的zip文件在解压时候就出报这个错误. 具体的解决办法,通过网上搜索 ...

  6. 利用bootstrap上传视频文件,mvc做后台处理

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  7. 使用cropper插件进行图片裁剪 并上传

    cropper插件的使用和 github地址: github 官方实例 我参考的中文文档: https://www.cnblogs.com/baka-sky/p/8001577.html 因为我是.n ...

  8. java 附件上传、下载前后端代码

    前言:业务需要:附件上传,需要同时满足浏览器上传,和APP上传附件,并且浏览器端不可使用form表单提交,因为表单提交无法直接获取返回值,除非刷新页面才可显示上传的附件.所以此处使用ajaxfileu ...

  9. poj3070矩阵快速幂求斐波那契数列

      Fibonacci Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13172   Accepted: 9368 Desc ...

  10. MySQL数据库中的字段类型varchar和char的主要区别是什么?哪种字段查找效率要高?

    1,varchar与char的区别?(1)区别一,定长和变长,char表示定长,长度固定:varchar表示变长,长度可变.当插入字符串超出长度时,视情况来处理,如果是严格模式,则会拒绝插入并提示错误 ...