JavaScript标签云Tag Cloud,仿QQ挚友印象结果

发布时间：2018-08-17 10:29:26 所属栏目：编程来源：站长网

导读：Java Script标签云Tag Cloud，仿QQ挚友印象结果，此类结果也可以叫做云标签，实现思绪: 1.先给元素随机出一个左上极点的位置; 2.然后按照元素的框高，用一维数组判定元素地址的二维坐标有没有被标志arr=1; 3.假若有被标志的，计数随机次数radomTag++，然后

　　JavaScript标签云Tag Cloud，仿QQ挚友印象结果，此类结果也可以叫做云标签，实现思绪:

　　1.先给元素随机出一个左上极点的位置;

　　2.然后按照元素的框高，用一维数组判定元素地址的二维坐标有没有被标志arr=1;

　　3.假若有被标志的，计数随机次数radomTag++，然后从头举办第一步，而且标志flag=false，竣事第二部的轮回搜查;

　　4.假如radomTag == radomKey阀值，则假设这个层满了，不能塞进块了，那么就新建一层arr=[];

　　5.假如在第3步全部的点都没有被标志，即flag=true，则把这个节点表现在页面上，重置radomTag = 0;

　　随机掷中率不知道尚有木有步伐进步，我测试过，阀值配置为10的时辰每层只有25个元素，当阀值配置成1000时每层有50个元素

　　示例：

<!DOCTYPE html> <html> <head> <meta charset="gbk" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>JS标签云</title> <style type="text/css"> #box { width: 500px; height: 500px; position: relative; border: 1px solid #000; list-style: none; } #box li { height: 25px; line-height: 25px; position: absolute; padding: 5px 30px; border: 1px solid #DDDDDD; background: none repeat scroll 0 0 #EFEFEF; } </style> </head> <body> <ul id="box"> <li>猛火学院</li> </ul> <script type="text/javascript"> var box = document.getElementById('box'), //束缚范畴 list = box.getElementsByTagName('li')[0], //随机元素 arr = new Array(), //记录坐标 radomTag = 0, //随机标志 radomKey = 10; //随机阀值 positionFuc(list);//默认的谁人放进算法中 for (var i = 0; i <= 100; i++) { var nodeLi = list.cloneNode(true); box.appendChild(nodeLi); positionFuc(nodeLi); } function positionFuc($node) { var w = $node.offsetWidth, //元素宽度 h = 37, //元素高度 boxWidth = 500, //box宽度 boxHeight = 500, //box高度 xp = 31, //横向(padding+border)/2 yp = 6, //纵向(padding+border)/2 radomX = radomFuc(boxWidth - w), //横向随机位置 radomY = radomFuc(boxHeight - h), //纵向随机位置 flag = true; for (var x = 0; x <= w; x++) { for (var y = 0; y <= h; y++) { if (arr[(radomY + y) * boxWidth + radomX + x] == 1) { radomTag++; if (radomTag == radomKey) arr = []; positionFuc($node); return flag = false; } } } if (flag) { $node.style.cssText = 'top:' + radomY + 'px;left:' + radomX + 'px;background-color:' + hsl2color([radomFuc(360), 100, 70]); for (var x = xp; x <= w - xp; x++) { for (var y = yp; y <= h - yp; y++) { arr[(radomY + y) * boxWidth + radomX + x] = 1; } } radomTag = 0; } } function radomFuc($value) { //取随机数 return parseInt($value * Math.random()); } function hsl2color(hsl) { //HSL颜色算法 if (hsl[0] > 360 || hsl[0] < 0 || hsl[1] > 100 || hsl[1] < 0 || hsl[2] > 100 || hsl[2] < 0) return "#000000"; var rgb = [0, 0, 0]; if (hsl[0] <= 60) { rgb[0] = 255; rgb[1] = Math.floor(255 / 60 * hsl[0]); } else if (hsl[0] <= 120) { rgb[0] = Math.floor(255 - (255 / 60) * (hsl[0] - 60)); rgb[1] = 255; } else if (hsl[0] <= 180) { rgb[1] = 255; rgb[2] = Math.floor((255 / 60) * (hsl[0] - 120)); } else if (hsl[0] <= 240) { rgb[1] = Math.floor(255 - (255 / 60) * (hsl[0] - 180)); rgb[2] = 255; } else if (hsl[0] <= 300) { rgb[0] = Math.floor((255 / 60) * (hsl[0] - 240)); rgb[2] = 255; } else if (hsl[0] <= 360) { rgb[0] = 255; rgb[2] = Math.floor(255 - (255 / 60) * (hsl[0] - 300)); } var sat = Math.abs((hsl[1] - 100) / 100); rgb[0] = Math.floor(rgb[0] - (rgb[0] - 128) * sat); rgb[1] = Math.floor(rgb[1] - (rgb[1] - 128) * sat); rgb[2] = Math.floor(rgb[2] - (rgb[2] - 128) * sat); var lum = (hsl[2] - 50) / 50; if (lum > 0) { rgb[0] = Math.floor(rgb[0] + (255 - rgb[0]) * lum); rgb[1] = Math.floor(rgb[1] + (255 - rgb[1]) * lum); rgb[2] = Math.floor(rgb[2] + (255 - rgb[2]) * lum); } else if (lum < 0) { rgb[0] = Math.floor(rgb[0] + rgb[0] * lum); rgb[1] = Math.floor(rgb[1] + rgb[1] * lum); rgb[2] = Math.floor(rgb[2] + rgb[2] * lum); } return "#" + (0x1000000 + rgb[0] * 0x010000 + rgb[1] * 0x000100 + rgb[2]).toString(16).substring(1); } </script> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys