当前位置：文江博客话题详情

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

发布于 2016-12-17 23:48:17 字数 35 浏览 1144 评论 3

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

瑾兮 2017-07-24 09:25:53

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

$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.">";
}

回复收藏 0

晚风撩人 2017-01-04 15:01:23

实现原理其实很简单：
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);

回复收藏 0

泛泛之交 2016-12-22 10:11:59

我觉得这个功能应该用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");