Tag Clouds标签云的实现

关于Tag Clouds，可能网上见过不少，不过具体的实现说的不多，在24Way上看到一个不错的文章，先是把delicious、flickr、Technorati等web2.0大家的tag clouds 表现形式逐一批判了一下，然后提出了自己的一个解决方案。总的来说，还比较简单，不过我在想，到底是根据什么来分这个等级呢?如果仅仅是个数字，那这个数字是多少才算个界限呢？

文章中的方法实现如下（可以直接在这里查看源代码）：
CSS： 

<style type= 'text/css'> 
    /* display the individual items next to each other, not one-per-line */ 
     .tag-cloud li { display: inline; } 
 
    /* hide the extra context from CSS-enabled browsers, but not screenreaders */ 
    .tag -cloud span { position: absolute; left: -999px; width: 990px; }  
    /* size is purely presentational, based upon the class */ 
    . tag-cloud .not-popular { font-size: 1em; } 
     .tag-cloud .not-very-popular { font-size: 1.3em; } 
 
    .tag-cloud .somewhat-popular { font-size:  1.6em; } 
    .tag-cloud .popular {  font-size: 1.9em; } 
    .tag-cloud .very-popular  { font-size: 2.2em; } 
    . tag-cloud .ultra-popular { font-size: 2.5em; } 
 </style> 
 

HTML：

  
<ol class='tag-cloud'>  
    <li class="somewhat-popular"> <span>44 photos are tagged with </span> <a href='http://flickr.com/photos/mn_francis/tags/125shaftesburyavenue/'  class='tag'>125 Shaftesbury Avenue</a> </li> 
    <li class="not-popular" ><span>2 photos are tagged with </span> <a href='http://flickr.com/photos/mn_francis/tags/airlinefood/'  class='tag'>airline food</a> </li> 
    <li class="ultra-popular" ><span>344 photos are tagged with </span> <a href='http://flickr.com/photos/mn_francis/tags/austin/'  class='tag'>austin</a> </li> 
    <li class="not-very-popular" ><span>12 photos are tagged with </span> <a href='http://flickr.com/photos/mn_francis/tags/badjoke/'  class='tag'>bad joke</a> </li> 
    ........
</ol>