javascript - 将 100 件元素放入圆形容器中，使用 javascript 均匀分布

Question

我有 100 个元素以随机顺序进入视口(viewport)。它们需要一起在 DOM 容器内形成一个圆圈。我需要一些方法来计算元素需要移动到的位置...

结构是这样的:

http://codepen.io/anon/pen/WvbKjb (内部有一些 css 和 js 的视觉示例)

<div id="circle"><!-- 100 items in here --></div</div>

然后对于这个示例，JS 将生成 100 个 div 并使用 css 设置它们的位置:

for (i = 0; i <= 100; i++) { 
    var item = document.createElement('div');
    item.id = 'item'+i;
    item.className = 'item';
    item.setAttribute('style', 'left:0px;top:0px');
    document.getElementById('circle').appendChild(item);
}

所以我会生成 100 个 .item 元素并在屏幕上移动它们。这个 Action 不是问题:我不知道该怎么做是找到每个元素必须结束的位置以正确填充圆圈。有什么方法可以用公式轻松计算吗？恐怕这超出了我的数学能力......

在此先感谢您的帮助。

编辑:使用 jQuery 也可以。

Answer 1

你可以从这个开始，只是一点数学: Example

主要部分是:

var spacing  = 360 / count;
var l = Math.cos(rotation * Math.PI / 180) * radius - itemRadius;
var t = Math.sin(rotation * Math.PI / 180) * radius - itemRadius;
rotation += spacing;

其中间距实际上是一个 Angular