Question

我有100个项目以随机顺序进入视口。他们需要在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元素并在屏幕上移动它们。这个动作不是一个问题：我不知道该怎么做才能找到每个项目必须结束的位置以正确填充圆圈。有没有办法用公式轻松计算出来？我担心这超出了我的数学技能......

提前感谢您的帮助。

编辑：使用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;

其中间距实际上是一个角度

Answer 2

可能有点超负荷，但这是我尝试过的，对我有用的东西：https://jsfiddle.net/tx7po9eg/1/

主要部分是此功能，它将根据定义的中心和半径计算特定元素的位置。

function getPos(cent, rad, amount, iteration) {
    var degree = 360 / amount * iteration;

    var changeY = cent.y - (Math.sin(degree * Math.PI / 180) * rad); 
    var changeX = cent.x - (Math.cos(degree * Math.PI / 180) * rad); 

    var ret = {};
    ret.x = Math.round(changeX * 100) / 100;
    ret.y = Math.round(changeY * 100) / 100;

    return ret;
}

这里有一个包含可视化的例子： https://jsfiddle.net/tx7po9eg/3/

Answer 3

您必须确切地决定如何适应圆圈内的所有元素。你想让它们围绕参数单行吗？随机？填圆圈？

如果你想要填充圆圈，你可以做的一件事就是那样工作 - 从中心向外移动，首先将一个项目放在中间，然后走出去并在它周围放另一个圆圈，然后再围绕它，就像那样继续将它包裹在图层中，直到你到达圆圈的末端。这里要弄清楚的唯一事情就是间距（例如每层中有多少个圆圈），这取决于每个元素的大小（固定的大小）？

如果你可以让容器圈子尽可能大，你就可以开始制作图层，直到用完物品，然后在它们周围放置大圆圈。

希望这会有所帮助......

在圆形容器中装入100个物品，用javascript均匀分隔

3 个答案: