定位多个随机大小、绝对定位的元素，使它们不会重叠
好吧，我需要能够在页面上放置一堆随机大小的绝对定位的单词，但我不希望任何元素重叠。
最终目标是拥有一个流畅的词云响应用户交互（还记得 Google Balls Doodle 吗？）。我真的很想从头开始构建它，以加深我对此类开发的理解。该部门的任何帮助也将不胜感激:)
Ok I need to be able to position a bunch of random sized absolutely positioned words on a page but I don't want any of the elements to overlap.
The end goal is to have a fluid word cloud that responds to user interaction (remember the Google Balls Doodle?). I would really like to build this from scratch to develop my understanding of this type of development. Any help in this department would also be appreciated :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不确定您是否也想将单词随机放置在容器内，但我已经写了一个小提琴来做到这一点。如果您愿意，您可以修改代码，将一个单词放在另一个单词之后。我认为关键部分是检查是否发生碰撞的方法。
请参阅 http://jsfiddle.net/fZtdt/13/
编辑：请注意，这是非常简单且未经优化的代码。例如，如果您要添加许多单词，则脚本很可能无法容纳容器内的所有单词，并进入无限循环。
I'm not sure if you also want to position the words randomly inside a container, but i've written a fiddle that does just that. You can modify the code to position one word right after the other if you want to though. I think the key part is the method to check if there's a collision.
see http://jsfiddle.net/fZtdt/13/
EDIT: Be aware that this is very simple and unoptimized code. If for example you would add to many words, chances are that the script won't be able to fit all words inside the container, and get into an endless loop.
我分叉了 Jules 的脚本来添加此改进：对非重叠区域的搜索是有界的（否则我相信原始脚本将循环），并且选择最佳区域（重叠最小的区域）。
请参阅 http://jsfiddle.net/Vnyvc/21/
使用 maxSearchIterations 变量和/或整个地区的大小，这确实很重要。
I have forked Jules' script to add this improvement : the search for a non-overlapping region is bounded (otherwise the original script will loop I believe), and the best region (the one with the smallest overlap) is selected.
see http://jsfiddle.net/Vnyvc/21/
play with the maxSearchIterations variable and/or the size of the whole region, it really makes a difference.