三明市，福建省辖地级市，位于福建省中部连接西北隅，地处北纬25°30′～27°07′、东经116°22′～118°39′之间，全市面积22965平方千米；东依福州市，西毗江西省，南邻泉州市，北傍南平市，西南接龙岩市； [1] 是一座新兴的工业城市，是全国文明城市和国家卫生城市、国家园林城市及中国优秀旅游城市。 [2] 2016年9月，被国家林业局授予“国家森林城市”称号。 [3] 2017年，三明市复查确认继续保留全国文明城市荣誉称号。 [4]
三明市拥有海峡两岸（三明）现代林业合作实验区，是全国集体林业综合改革试验示范区，享有福建“绿色宝库”的美誉，是全国四个活立木蓄积量超过1亿立方米的设区市之一。截至2015年6月，已发现金属和非金属矿种79个，已探明储量的矿种49种，已开发利用的43种。全市拥有泰宁世界自然遗产地、世界地质公园2个世界级品牌和国家级、省级旅游品牌各50多个，数量和等级名列全省前茅。 [2]
在前端中用得最多的要么线性，要么矩形布局，都是栅格方块组成的页面样式。这显得很单一，如果突然加入环形布局，将会让人眼前一亮，通过JavaScript可以很灵活的使用这种布局，这时候我们学的数学知识派上用场了，没错，就是三角函数，经典的数学问题。已知一个圆心的坐标和圆的半径以及任意一条半径与水平线的夹角，求这条半径终点的坐标。这放在数学上是一道很简单的题目，但是放在编程里面有的人就犯糊涂了。引入一张图片做解释。
比方说我要围绕圆心，平均分配n个元素围绕圆心布局，这时候可以通过360/n来获取平均每个元素间的夹角，而第i个元素与水平夹角为360/n*i，没毛病。有了夹角就能通过Math.sin()和Math.cos()算出元素相对于圆心的坐标了。不过这里需要注意的是程序中使用角度都要换成弧度来用。可以通过角度乘以Math.PI/180得出弧度。
复制代码var ele=document.getElementsByTagName("i");var count=ele.length;var angle=360/count;var radius=100;//求得相对于圆心的水平距离和垂直距离for(var i =0;i<count;i++){var eleX=Math.cos(angle*i*Math.PI/180)*radius;var eleY=Math.sin(angle*i*Math.PI/180)*radius;}复制代码如果在网页中，要先取到圆心的坐标，而圆心的坐标在js中通过offsetLeft和offsetTop和宽高就可取得中心点坐标。
复制代码var point=document.getElementById("circle");var pointLeft=para.pointElement.offsetLeft+para.pointElement.offsetWidth/2;var pointTop=para.pointElement.offsetTop-para.pointElement.offsetHeight/2;复制代码所以每个元素的实际坐标是圆心的坐标加上每个元素相对于圆心的坐标，即
复制代码for(var i =0;i<count ;i++){var X=pointLeft+eleX;var Y=pointTop+eleY;ele[i].style.position="absolute";ele[i].style.left=X;ele[i].style.left=Y;}复制代码这样就把他们塞到页面中去了，形成了围绕圆心四周的环形布局。 扇形的话也一个道理，只不过指定起始角度和结束角度。有效的角度则为结束角度减去起始角度，再用有效角度除以元素个数，就能算出平均角度。童丽可得。。。
复制代码var beginAngle=45;var endAngle=135;var pointTop=point.offsetTop;var validAngle=endAngle-beginAngle;var angle=validAngle/count;.....复制代码
进而可以写个方法出来，扇形和圆形兼得：
复制代码function circleLayout(para){var count=para.targetElement.length;if(!count||!para.pointElement){throw new Error("请传入布局元素参数targetElement和pointElement ！");return false;}var beginAngle=para.beginAngle;var endAngle=para.endAngle;var validAngle=endAngle-beginAngle;var angle=validAngle/count;var X,Y,pointLeft=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[0]):(para.pointElement.offsetLeft+para.pointElement.offsetWidth/2);pointTop=typeof para.pointElement==="string"?parseInt(para.pointElement.split(",")[1]):(para.pointElement.offsetTop+para.pointElement.offsetHeight/2);for(var i =0;i<count;i++){ var thisElement=para.targetElement[i];X=parseInt(Math.cos((angle*i+beginAngle)*Math.PI/180)*para.radius+pointLeft);Y=parseInt(Math.sin((angle*i+beginAngle)*Math.PI/180)*para.radius+pointTop);thisElement.style.position="absolute";thisElement.style.left=X-thisElement.offsetWidth/2+"px";thisElement.style.top=Y-thisElement.offsetHeight/2+"px";}}//调用circleLayout({pointElement:"200,250",//document.getElementById("center")//可传页面元素或坐标,targetElement:document.getElementsByTagName("li"),radius:150,beginAngle:0,endAngle:360});复制代码demo可以看我的下一篇综合案例文章《Js、Css3实现QQ资料卡标签特效》。
