生成随机元素位置并防止JavaScript中的重叠
我在页面上有一个持有者div，我想在随机位置加载小图像作为拼贴，每个都有10px填充。
如何确保图像永远不会相互重叠或持有div？ 是否有可以使用的插件或function？
我的代码到目前为止：
$(document).ready(function(){ $("#my_canvas img").each( function(intIndex) { var l = Math.floor(Math.random() * $("#my_canvas").width()); var t = Math.floor(Math.random() * $("#my_canvas").height()); $(this).css("left", l); $(this).css("top", t); $(this).bind( "click", function() { alert("l=" + l + " t=" + t); } ); } ); }）;
#my_canvas { background: #eee; border: black 1px solid; width: 800px; height: 400px; } #my_canvas img { padding: 10px; position:absolute; } 
将拾取的坐标存储在数组中，以便您可以比较放置的每个新图像的坐标与之前的坐标。
如果您选择的坐标与上一个图像重叠，请选择新坐标。 限制尝试次数，这样如果你不能放置1000次尝试的图像，你将重新开始使用第一张图像。
很抱歉找到一个旧post，但我最近遇到了类似的问题，我花了一些时间找到完美的解决方案 – 我现在想分享。 有树的方法来实现这一目标。
1）艰难的方式
如果您想自己实施，您可能会获得最符合您需求的结果。 它确实需要一些时间和大量的测试，但实际上并不是很难自己实现这样的function。 您可以使用Random-Functions Math.floor(Math.random() * Max) + Min来计算父元素中的随机位置。 在定位第一个元素之后，您需要将元素的坐标存储在一个数组中。 现在，在显示下一个元素之前，您可以使用数组来检查是否存在重叠 – 如果是，则可以只计算新位置。 这可能不是最有效的方法，但它对于没有那么多元素的效果会很好。 但我很确定如果你实现了这个，那么优化你的算法也不会太难以提高效率。
2）解决方法
实现这一目标的第二种方式比第一种方式更容易，但也不灵活。 因此，您需要使用一些预定义的布局 – 某种网格。 因此，假设您有一个包含100个网格块的容器，因此需要100个元素来放置元素。您现在可以只计算1到100之间的随机数，并将元素追加到网格容器中。 防止重叠很容易，但这样做可能并不总能满足您的需求。
3）最简单的方法如果搜索了很长一段时间但没有一个插件符合我的需要。 所以我自己创建了一个，我发布了，可以免费使用。 你可以在manuelmaurer.at/randposplugin.php下找到它。 它非常灵活，所以我认为这是实现目标的最简单方法。
我猜没有插件。 我将通过制作预定义的div网格并将随机图像加载到这些div来实现像Sander一样。 它比计算图像尺寸/位置更容易，更快，并完成相同的工作。 不随机但视觉上看起来不错:)