在圆形容器中放置100个项目，用javascript均匀分隔

I have 100 items entering the viewport in random order. Together, they need to form a circle inside a DOM container. I need some way to calculate the position the items need to move to...

我有100个项目以随机顺序进入视口。他们需要在DOM容器内形成一个圆圈。我需要一些方法来计算物品需要移动的位置......

The structure is kinda like this:

结构有点像这样:

http://codepen.io/anon/pen/WvbKjb (visual sample with a bit of css and js inside)

http://codepen.io/anon/pen/WvbKjb(内部有一点css和js的视觉样本)

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

And then the JS, for this sample, would generate 100 divs and set their position with css:

然后,对于此示例,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);
}

So I would generate 100 .item elements and move them around the screen. This movement is not an issue: what I don't know how to do is find the position each item has to end up at to properly fill the circle. Is there any way to easily calculate this with a formula? I'm afraid it's way beyond my math skills...

所以我会生成100个.item元素并在屏幕上移动它们。这个动作不是问题:我不知道该怎么做才能找到每个项目必须结束的位置以正确填充圆圈。有没有办法用公式轻松计算出来?我担心这超出了我的数学技能......

Thanks in advance for any help.

在此先感谢您的帮助。

EDIT: using jQuery would be fine too.

编辑:使用jQuery也没关系。

3 个解决方案

#1

You may start with this, just a bit of a math: Example

你可以从这开始,只是一点数学:例子

the main part is:

主要部分是:

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;

Where spacing is actually an angle

间距实际上是一个角度

#2

Probably a little overloaded but this is what i tried and what worked for me: https://jsfiddle.net/tx7po9eg/1/

可能有点超载,但这是我尝试过的,对我有用的:https://jsfiddle.net/tx7po9eg/1/

Main Part is this function which will calculate the position of a specific element depending on the defined center and the radius.

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

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

here an example including visualization: https://jsfiddle.net/tx7po9eg/3/

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

#3

You will have to decide exactly HOW you want to fit all the elements inside the circle. Do you want them in a single line around the parameter? At Random? Fill the circle?

您将必须确定您希望如何适应圆圈内的所有元素。您是否希望它们围绕参数单行?在随机?填圆圈?

If you want to fill the circle, one thing you could do is work like that - move from the center outside, starting by putting an item in the middle, then going out and putting another circle around it, then another around it, and like that keep wrapping it in layers until you hit the end of the circle. The only thing to figure out here would be the spacing (e.g. how many circles in each layer), and that would depend on the size of each element (are the sizes fixed)?

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

If you can make the container circle as large as you desire, you can just start making layers until you run out of items, and then place the big circle around them.

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

Hope this helps...

希望这可以帮助...

#1