定位多个随机大小，绝对定位的元素，使它们不重叠

Question

好的我需要能够在页面上放置一堆随机大小的绝对定位的单词，但我不希望任何元素重叠。

最终目标是拥有一个响应用户交互的流畅文字云（请记住Google Balls Doodle？）。我真的想从头开始构建这个来培养我对这种开发的理解。在这个部门的任何帮助也将不胜感激：）

Answer 1

我不确定你是否也想在容器内随机定位单词，但我写了一个小提琴就是这样做的。如果您愿意，可以修改代码以将一个单词放在另一个单词后面。我认为关键部分是检查是否存在碰撞的方法。

请参阅http://jsfiddle.net/fZtdt/13/

编辑：请注意，这是非常简单且未经优化的代码。例如，如果您添加许多单词，则可能是脚本无法容纳容器内的所有单词，并进入无限循环。

Answer 2

我已经分叉Jules的脚本来添加这个改进：搜索非重叠区域是有界的（否则原始脚本将循环我相信），并且选择最佳区域（具有最小重叠的区域）。

请参阅http://jsfiddle.net/Vnyvc/21/

使用maxSearchIterations变量和/或整个区域的大小，它确实有所作为。