wil*_*age 4 javascript css animation interactive positioning
好的,我需要能够在页面上放置一堆随机大小的绝对定位的单词,但我不希望任何元素重叠.
最终目标是拥有一个响应用户交互的流畅文字云(还记得Google Balls Doodle吗？).我真的想从头开始构建这个来培养我对这种开发的理解.在这个部门的任何帮助也将不胜感激:)
Jul*_*lle 13
我不确定你是否也想在容器内随机定位单词,但我写了一个小提琴就是这样做的.如果您愿意,可以修改代码以将一个单词放在另一个单词后面.我认为关键部分是检查是否存在碰撞的方法.
见http://jsfiddle.net/fZtdt/13/
编辑:请注意,这是非常简单和未经优化的代码.例如,如果您要添加许多单词,则可能是脚本无法容纳容器内的所有单词,并进入无限循环.
我已经分叉了朱尔斯的脚本以增加这种改进:搜索非重叠区域是有界的(否则原始脚本将循环我相信),并且选择最佳区域(具有最小重叠的区域).
见http://jsfiddle.net/Vnyvc/21/
使用maxSearchIterations变量和/或整个区域的大小,它确实有所作为.