javascript - 如何创建 CSS/JavaScript 圆网格

Question

我需要做这样的事情:

这看起来很容易，但有一些要求:- 包含的 div 的宽度应取决于文本长度(在 CSS 中是否可能？)- 所有圆圈应随机放置 - 这对我来说是最困难的部分。

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

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

Answer 1

根据内容大小缩放的圈子。

• 这是您需要首先解决的问题，因为如果不先了解它们的尺寸，您将无法将它们放置在任何地方。

• 自然地，DIV 的大小首先按宽度扩展，然后按高度扩展。也就是说，必须首先使用容器的最大宽度，然后再进行高度限制。因此，在不使用相对平均的情况下制作具有相等半径的圆刻度可能会非常困难。

• 相对平均是根据内容边界的现有区域找到高度/宽度的平均尺寸。例如:

---

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

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

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

√ 4000 = 63.2455532因此:63.2455532 x 63.2455532 = 4000

DIV随机放置，避免DIV之间的冲突。

• 找到尺寸后，您将能够在 (X,Y) 坐标上使用随机数来放置。将这些坐标和半径插入一个数组。也使用递归将剩余的圆圈放在碰撞失败上。碰撞失败将来自具有重叠的 (X,Y)+半径相对于数组中被成功推送的元素。