dynamic地安排一些元素围绕一个圆圈

我正在寻找一个函数来安排一些圆周围的元素。
结果应该是这样的：

Answer 1

这里有一些代码可以帮助你：

 var numElements = 4, angle = 0 step = (2*Math.PI) / numElements; for(var i = 0; i < numElements.length; i++) { var x = container_width/2 + radius * Math.cos(angle); var y = container_height/2 + radius * Math.sin(angle); angle += step; } 

这不完整，但应该给你一个好的开始。

---

更新：这是实际工作的东西：

 var radius = 200; // radius of the circle var fields = $('.field'), container = $('#container'), width = container.width(), height = container.height(), angle = 0, step = (2*Math.PI) / fields.length; fields.each(function() { var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2), y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2); $(this).css({ left: x + 'px', top: y + 'px' }); angle += step; }); 

演示： http : //jsfiddle.net/ThiefMaster/LPh33/
这是一个改进的版本 ，您可以更改元素数量。

Answer 2

对于在（ x ， y ）距离r处的中心周围的元素，元素的中心应该位于：

 (x + r cos(2kπ/n), y + r sin(2kπ/n)) 

其中n是元素的数量， k是你当前定位的元素的“数量”（在1和n之间）。

Answer 3

我将ThiefMaster的小提琴与jQuery pointAt插件结合在一起：

演示： http : //jsfiddle.net/BananaAcid/nytN6/

 the code is somewhat like above. might be interesting to some of you. 

Answer 4

我修改了ThiefMaster的小提示，自动将div分布在半径等于width / 2的容器div的圆上：

 <div class="circle-distribute-container"> <div class="circle-element">one</div> <div class="circle-element">two</div> <div class="circle-element">three</div> <div class="circle-element">four</div> <div class="circle-element">five</div> </div> <div class="circle-distribute-container"> <div class="circle-element">another one</div> <div class="circle-element">another two</div> <div class="circle-element">another three</div> <div class="circle-element">another four</div> </div> 

请参阅链接