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

Posted 2023-02-21

【中文标题】定位多个、随机大小、绝对定位的元素，使它们不重叠

【英文标题】：Positioning multiple, random sized, absolutely positioned elements so they don't overlap

【发布时间】：2011-09-07 15:35:20

【问题描述】：

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

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

【问题讨论】：

可能有用设置字体大小，先获取周围元素的高度/宽度，然后再开始定位。 jsfiddle.net/yYB7t

@minikomi 知道如何进行定位吗？我知道如何获取元素的高度和宽度。

【参考方案1】：

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

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

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

【参考方案2】：

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

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

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

【讨论】：

这令人印象深刻！我的最终目标是创建一些看起来像这样的东西lucaongaro.eu/demos/jqcloud你能帮助/修改你的答案吗？

当然，您可以随意设置所有单词的样式。查看jsfiddle.net/fZtdt/14

jqcloud这个东西好像是用螺旋函数来定位标签，从中心位置开始，字数最大的。我不会发布该代码，因为您可以在这里获取它的开源代码：plugins.jquery.com/project/jQCloud

jQCloud 链接现在已断开。 :(