javascript - 在主 div 中创建任意数量的 div，并在运行时使用 jQuery 分配位置

Question

我想以圆形形式放置许多 div。我将为 div 使用相对定位。首先，我尝试在圆圈周围放置四个 div

div 1 - 前 50 名，还剩 100

div 2 - 前 100 名，还剩 150

div3 -前 150 名，还剩 100

分区 4 -前 100 名，还剩 50 个

我将计算实际情况下的值并设置它们，但现在这并不重要。是否可以在外部 div 中创建四个 div(在实际情况下它会很大)。但我需要为这些 div 分配不同的顺序 ID，并将它们放在提到的位置。

我将不得不计算然后使用脚本分配顶部和左侧位置。那么您能否展示如何使用脚本分配这些值。

Answer 1

这真是一个很好的问题，因为它还需要一些数学背景。

那么，首先，让我们说一下我们要做什么: 0.你必须决定圆心和半径 1. 我们必须决定在哪个 Angular ，在一个圆上，我们应该把我们的 div 2 然后我们应该创建一个函数，给定 Angular ，给你 div 的位置

那么，我们如何处理所有这些？

1. 决定哪个应该是圆心(如果它必须留在页面的中心

2. 确定半径(也可以根据 window 尺寸计算)

3. 一些三 Angular 函数:要理解 Angular iterval，只需将 360° 除以 div 的数量:如果您有两个 div，则 Angular 间隔为 360/2=180(丑陋)。如果你有 10 个 div，你的间隔是 36°

很好，现在我们可以开始编码了。

1. 获取中心:我只是将您重定向到此 stackoverflow link

2. 使用相同的代码来决定半径

3. 该函数将 div 的数量、半径、中心作为输入，并返回一个包含 div 坐标的数组。中心是一个 2 位数组(x 和 y)。在函数中我们做了一些调整来输出div的实际位置。

.

 function getCoords(divNum, radius, center){
   var num= divNum;
   var angleInt= (6.28/num);
   var outArray=[];
   for (i=0;i<divNum;i++){
    outArray.push([(Math.cos(angleInt*i)*radius+center[0]),(Math.sin(angleInt*i)*radius+center[1])]);
   }
  return outArray;
}

好了，完成了，现在您可以使用任何 jquery 方法放置您的 div，就像这个例子:

var localization=getCoords(10,200,[400,400]);

var i=1;
for (var element in localization){
    var posTop=localization[element][0];
    var posLeft=localization[element][1];
    var element= $("<div class='inner'>"+i+"</div>");
    $(element).css({ position: "absolute",
            marginLeft: 0, marginTop: 0,
            top: posTop, left: posLeft });
    $("body").append(element);
   i=i+1;

}

希望对你有帮助