围绕一个圆圈动态排列一些元素

Question

我正在寻找一个函数来围绕一个圆圈排列一些元素。

结果应该是这样的：

原文由 Omid 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一些可以帮助您的代码：

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

它不完整，但应该给你一个良好的开端。

---

更新：这是实际有效的东西：

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

演示：http: //jsfiddle.net/ThiefMaster/LPh33/

这是一个 改进的版本，您可以在其中更改元素数。

原文由 ThiefMaster 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于以 ( x , y ) 为中心、距离为 r 的 元素，元素的中心应位于：

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

其中 n 是元素的数量， k 是您当前定位的元素的“数量”（介于 1 和 n 之间）。

原文由 Delan Azabani 发布，翻译遵循 CC BY-SA 3.0 许可协议