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

Question

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

最终目标是拥有一个响应用户交互的流畅词云（还记得Google Balls Doodle吗？）。我真的很想从头开始构建它，以加深我对此类开发的理解。该部门的任何帮助也将不胜感激:)

Answer 1

我已经分叉了 Jules 的脚本以添加此改进：对非重叠区域的搜索是有界的（否则我相信原始脚本会循环），并选择最佳区域（重叠最小的区域）。

见http://jsfiddle.net/Vnyvc/21/

使用 maxSearchIterations 变量和/或整个区域的大小，这真的很重要。

Answer 2

我不确定您是否还想将单词随机放置在容器内，但我已经写了一个可以做到这一点的小提琴。如果您愿意，您可以修改代码以将一个单词紧跟在另一个单词之后。我认为关键部分是检查是否有碰撞的方法。

见http://jsfiddle.net/fZtdt/13/

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