Organice dinámicamente algunos elementos alrededor de un círculo

Question

Estoy buscando una función para organizar algunos elementos alrededor de un círculo.
resultado debería ser algo como:

Answer 1

Aquí hay un código que debe ayudarle a:

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; 
} 

No es completa, pero debe darle un buen comienzo.

---

Actualización: Aquí hay algo que realmente funciona:

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; 
}); 

Demostración: http://jsfiddle.net/ThiefMaster/LPh33/
He aquí un improved version donde se puede cambiar el contador de elementos.

Answer 2

Para un elemento alrededor de un centro en (x, y), distancia r, el centro del elemento debe ser posicionado en:

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

donde n es el número de elementos y k es el "número" del elemento que está posicionando actualmente (entre 1 y n inclusive).

Answer 3

He combinado violín de ThiefMaster con el plugin jQuery pointAt:

Demostración: http://jsfiddle.net/BananaAcid/nytN6/

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

Answer 4

he modificado violín de ThiefMaster para distribuir automáticamente divs alrededor de un círculo con radio igual a la anchura/2 del contenedor 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> 

Ver link