PHP-php标签云的创建技术要点

前端开发 前端开发 主题:1148 回复:2395

PHP-php标签云的创建技术要点

甜柠檬 发布于 2016-12-17 字数 63 浏览 1010 回复 3

想做一个云标签在页面上飘,有经验的同仁告知一下实现原理?

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

瑾兮 2017-07-24 3 楼

下面是直接收藏的一段代码,可供参考

$artist = array("the roots","michael jackson","billy idol","more","and more","and_YET_MORE");
$count = array(5,3,9,1,1,3);
$highest = max($count);
for ((int) $x = 0; x < count($artist); $x++)
{
$normalized = $count[$x] / $highest;
$heading = ceil($normalized * 6); // 6 heading types
echo "<h".$heading.">".$artist[$x]."</h".$heading.">";
}

晚风撩人 2017-01-04 2 楼

实现原理其实很简单:

  1. 统计标签及频率(次数)
  2. 设计标签云显示样式(比如根据不同的颜色或者字体大小显示)
  3. 使用php按照设计的样式显示标签

下面的代码仅供参考,示例数据使用时可能需要读取数据库获取。

function getCloud( $data = array(), $minFontSize = 12, $maxFontSize = 30 )
{
$minimumCount = min( array_values( $data ) );
$maximumCount = max( array_values( $data ) );
$spread = $maximumCount - $minimumCount;
$cloudHTML = '';
$cloudTags = array();

$spread == 0 && $spread = 1;

foreach( $data as $tag => $count )
{
$size = $minFontSize + ( $count - $minimumCount )

  • ( $maxFontSize - $minFontSize ) / $spread;
    $cloudTags[] = '<a style="font-size: ' . floor( $size ) . 'px'
    . '" href="#" title="'' . $tag .
    '' returned a count of ' . $count . '">'
    . htmlspecialchars( stripslashes( $tag ) ) . '</a>';
    }

return join( "n", $cloudTags ) . "n";
}
/**
* Sample usage /
$arr = Array('Actionscript' => 35, 'Adobe' => 22, 'Array' => 44, 'Background' => 43,
'Blur' => 18, 'Canvas' => 33, 'Class' => 15, 'Color Palette' => 11, 'Crop' => 42,
'Delimiter' => 13, 'Depth' => 34, 'Design' => 8, 'Encode' => 12, 'Encryption' => 30,
'Extract' => 28, 'Filters' => 42);
echo getCloud($arr, 12, 36);

泛泛之交 2016-12-22 1 楼

我觉得这个功能应该用JavaScript来实现更好,能在客户端实现的功能最好不要让服务端来做

 <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>JS标签云</title>
<style type="text/css">
*{
margin:0;
padding:0
}
a{
text-decoration:none
}

wrap{

width:400px;
margin:auto

}
</style>
<script type="text/javascript">
window.onload=function(){
var obox=document.getElementById("wrap");
var obj=obox.getElementsByTagName("a");

  function rand(num){
   return parseInt(Math.random()*num+1);
  }
  function randomcolor(){
    var str=Math.ceil(Math.random()*16777215).toString(16);
    if(str.length&lt;6){
      str="0"+str;
    }
    return str;
  }
  //循环
  for( len=obj.length,i=len;i--;){
    obj[i].className="color"+rand(5);
    obj[i].style.zIndex=rand(5);
    obj[i].style.fontSize=rand(12)+12+"px";
   // obj[i].style.background="#"+randomcolor();
    obj[i].style.color="#"+randomcolor();
    obj[i].onmouseover=function(){
      this.style.background="#"+randomcolor();
    }
    obj[i].onmouseout=function(){
      this.style.background="none";
    }
  }
}

</script>
</head>
<body>
<div id="wrap">
<a href="#">css</a>
<a href="#">javascript</a>
<a href="#">html5</a>
<a href="#">canvas</a>
<a href="#">video</a>
<a href="#">audio</a>
<a href="#">jQuery</a>
<a href="#">jQuerymobile</a>
<a href="#">flash</a>
<a href="#">firefox</a>
<a href="#">chrome</a>
<a href="#">opera</a>
<a href="#">IE9</a>
<a href="#">css3.0</a>
<a href="#">andriod</a>
<a href="#">apple</a>
<a href="#">google</a>
<a href="#">jobs</a>
</div>
</body>
</html>