我有 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 也可以。
最佳答案
你可以从这个开始,只是一点数学: 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
关于javascript - 将 100 件元素放入圆形容器中,使用 javascript 均匀分布,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29914084/