定位多个、随机大小、绝对定位的元素，使它们不重叠 [英] Positioning multiple, random sized, absolutely positioned elements so they don't overlap

问题描述

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

最终目标是拥有一个响应用户交互的流畅词云(请记住 Google Balls涂鸦?).我真的很想从头开始构建它来发展我对这种类型的开发的理解.本部门的任何帮助也将不胜感激:)

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 :)

推荐答案

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

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.

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

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

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.

这篇关于定位多个、随机大小、绝对定位的元素，使它们不重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！