如何创建CSS/JavaScript圈子网格

Question

我需要做这样的事情:

这可能看起来很简单,但是有一些要求: - 包含div的宽度应该取决于文本长度(在CSS中是否可以？) - 所有圆圈应该随机定位 - 这是最困难的部分我.

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

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

Answer 1

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

\n\n

\n

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

\n

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

\n

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

\n

\n\n\n\n

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

\n\n

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

\n\n

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

\n\n

\xe2\x88\x9a 4000 = 63.2455532\n因此： 63.2455532 x 63.2455532 = 4000

\n\n

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

\n\n

\n
• 找到尺寸后，您将能够在放置的 (X,Y) 坐标上使用兰特。将这些坐标和半径推送到数组中。使用递归也将剩余的圆圈置于碰撞失败上。碰撞失败可能来自于与数组中已成功推送的元素有重叠 (X,Y)+半径的元素。
\n

\n