如何创建CSS / JavaScript圈子网格

Question

我需要做这样的事情：

这可能看起来很简单，但有一些要求： - 包含div的宽度应该取决于文本长度（CSS中是否可以？） - 所有圆圈都应随机定位 - 这对我来说是最困难的部分。

当我使用border-radius创建圆圈（设置高度，宽度和border-radius 50％）时，我尝试在JavaScript中创建某种网格，在其中迭代每个元素并获取其尺寸。然后我得到前一个元素的位置（如果有的话）并将它们添加到当前元素维度。此外，添加一些边距将有助于避免冲突。这是正确的做法吗？

我只是在寻找如何解决我的两个问题的建议。

Answer 1

根据内容大小扩展的圈子。

• 这是您首先需要解决的问题，因为您无法在不知道尺寸的情况下将它们放在任何地方。

• 当然，DIV的大小首先按宽度扩展，然后按高度扩展。也就是说，在进入高度约束之前，必须首先使用容器的最大宽度。因此，如果不使用相对平均值，制作半径相等的圆形刻度可能会非常困难。

• 相对平均是根据包含内容的contianer的exhisting区域找到您的身高/宽度的平均尺寸。例如：

---

可以使用javascript检测绑定内容的DIV的宽度和高度。假设您发现这些属性分别为200px x 20px。

你的总面积是宽*高，所以4000px;但是我们正在努力实现一个正方形，以便我们可以应用圆角并形成圆形圆。我们想要找到一个等于相同区域的矩形尺寸，然后应用这些新尺寸。

要获得宽度相等的相同区域*高度，您可以执行以下操作：

√4000= 63.2455532 因此：63.2455532 x 63.2455532 = 4000

随机放置DIV，并避免DIV之间的碰撞。

• 找到尺寸后，您可以在放置的（X，Y）坐标上使用兰特。将这些坐标和半径推到数组上。使用递归也将剩余的圆放在collsion失败上。碰撞失败将来自一个元素，该元素具有重叠（X，Y）+半径相对于数组中成功推送的元素。