Позиция вокруг точки

Question

У меня есть центральная точка на странице (x, y) и вам необходимо равномерно распределить различное количество элементов (div) вокруг этой точки по кругу. Расстояние от центральной точки будет фиксировано.

Это мой код до сих пор:

var noElements = $('div').size(); 
var xDistance = 100; 
var angle = 0; 
var offset = 250; 

$('div').each(function(index) { 
    angle = (360/noElements)*index; 

    $(this).css({'left': offset + (Math.sin(angle) * xDistance), 'top': offset + (Math.cos(angle) * xDistance)}); 
});​ 

Это код в fiddle.

Это не совсем работает, если вы добавите больше div на скрипке, вы увидите, что div не равномерно распределены. Например, имея 8 элементов, вызывает перекрытие двух в нижней части.

Answer 1

Math.sin и Math.cos ожидаем, что угол в радианах, а не дегресс. Перед прохождением необходимо преобразовать ваши углы в радианы:

var radians = degrees * (Math.PI/180); 

Answer 2

заключите DIVs с

<div id="container" style="position: absolute; top: 200px; left: 200px"> 
... 
</div> 

(Вы забыли элемент #container). Но убедитесь, что вы исключили его из each() (например, вы можете предоставить всем другим DIVs класс CSS и использовать его как $("div.myclass")).

Answer 3

Ориентировочная величина: PI = 3.6.

Изменить это:

$('div').each(function(index) { 
angle = ((3.1415926535897932384626433832795 * 2)/noElements)*index; 

$(this).css({'left': offset + (Math.sin(angle) * xDistance), 
    'top': offset + (Math.cos(angle) * xDistance)}); 
    }); 

выглядеть больше раунд, если дивы были круги :)

Answer 4

Извините за не выписывая полный пример, но у меня нет много времени на момент.

В верхней части источника, вы будете нуждаться в них:

var radToDeg = Math.PI/180; 
var incrementingAngle = 360/noElements; 
var currentAngle = 0; 

А в настройках вашего CSS цикла по каждому элементу в ...

left: Math.sin(currentAngle * radToDeg), 
top: Math.cos(currentAngle * radToDeg) 

И в конце каждого цикла:

currentAngle += incrementingAngle;