Sắp xếp động một số yếu tố xung quanh một vòng tròn

Question

Tôi đang tìm một hàm để sắp xếp một số phần tử xung quanh một vòng tròn.
kết quả nên được một cái gì đó như:

Answer 1

Dưới đây là một số mã mà sẽ giúp bạn:

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

Nó không phải là hoàn toàn nhưng nên cung cấp cho bạn một khởi đầu tốt.

---

Cập nhật: Đây là cái gì đó thực sự hoạt động:

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

Demo: http://jsfiddle.net/ThiefMaster/LPh33/
Dưới đây là một improved version nơi bạn có thể thay đổi số lượng phần tử.

Answer 2

Đối với một yếu tố xung quanh một trung tâm tại (x, y), khoảng cách r, trung tâm của phần tử cần được bố trí tại địa chỉ:

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

nơi n là số nguyên tố và k là "số" của phần tử bạn hiện đang định vị (từ 1 đến n bao gồm).

Answer 3

tôi đã kết hợp fiddle ThiefMaster với các plugin jQuery pointAt:

Demo: http://jsfiddle.net/BananaAcid/nytN6/

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

Answer 4

Tôi đã sửa đổi fiddle ThiefMaster để tự động phân phối divs xung quanh một vòng tròn với bán kính bằng chiều rộng/2 của div container:

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

Xem link