实现一个TagCloud

Tag Cloud即:标签云,是把标签汇集起来形成的界面,多出现在一些使用标签来组织内容的页面上,通常就是这种形式:
标签的显示效果是随着其出现的频率或重要程度被不断加强的,越是凸显的标签就说明其出现的频率越高或者越重要。基于这个特点来看,标签云其实起到了推荐和引导的作用。

制作一个简单的Tag Cloud:“被引用次数越多的标签其字号越大”(某个文章的Tag属性中若是设置了某个标签,就说该标签被引用了一次)。

首先要确定标签被引用的次数与字号之间的对应关系,也就是说拿到一个数值x,你得能算出对应的字号f(x)来,算法如下:

f(x) = min_font_size + ( max_font_size - min_font_size ) * x / max_tag_num

x:某个标签被引用的次数
min_font_size:最小字号,这里用 11px
max_font_size:最大字号,这里用 35px
max_tag_num:所有标签被引用的次数中的最大值

上面的x以及max_tag_num均可基于数据表取得,计算出标签的字号之后,将其体现在HTML中即可,就像这样:

1
2
3
4
5
6
<a href="标签2的URL" style="font-size: 标签1的字号px;">标签1的名字</a>
<a href="标签2的URL" style="font-size: 标签2的字号px;">标签2的名字</a>
                      .
                      .
                      .
<a href="标签n的URL" style="font-size: 标签n的字号px;">标签n的名字</a>

代码详见io工程: