生成随机元素位置并防止 JavaScript 中的重叠

Question

我在页面上有一个持有人 div，我想在其中随机位置加载小图像作为拼贴画，每个图像都有 10 像素的填充。

如何确保图像永远不会相互重叠或保持 div 重叠？ 有我可以使用的插件或功能吗？

到目前为止我的代码：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(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);
        }
    );

}

);

});

   <style type="text/css">
    #my_canvas
    {
        background: #eee;
        border: black 1px solid;
        width: 800px;
        height: 400px;
    }
    #my_canvas img
    {
        padding: 10px;
        position:absolute;
    }
</style>

<div id="my_canvas">
    <img src="images/1.jpg" />
    <img src="images/9.jpg" />
    <img src="images/2.jpg" />
    <img src="images/3.jpg" />
    <img src="images/4.jpg" />
    <img src="images/5.jpg" />
    <img src="images/6.jpg" />
    <img src="images/7.jpg" />
    <img src="images/8.jpg" />
</div>

Answer 1

将选取的坐标存储在数组中，以便您可以将放置的每个新图像的坐标与前一个图像的坐标进行比较。

如果您选取的坐标与之前的图像重叠，请选取新坐标。限制尝试次数，这样如果尝试 1000 次仍无法放置图像，则可以从第一个图像开始。

Answer 2

抱歉挖出一篇旧帖子，但我最近遇到了类似的问题，我花了一些时间才找到完美的解决方案 - 我现在想分享。有多种方法可以实现这一目标。

---

1) 困难的方法

如果您想自己实现它，您可能会获得最适合您需求的结果。它确实需要一些时间和大量的测试，但实际上您自己实现这样的功能并不困难。您可以使用随机函数 Math.floor(Math.random() * Max) + Min 计算父元素中的随机位置。定位第一个元素后，您需要将元素的坐标存储在数组中。现在，在显示下一个元素之前，您可以使用数组检查是否存在重叠 - 如果是，您可以计算一个新位置。这可能不是最有效的方法，但对于数量不多的元素来说它会很好地工作。但我非常确定，如果您实现了这一点，那么优化您的算法以使其更加高效也不会太困难。

2) 解决方法

实现此目的的第二种方法比第一种方法更容易，但也没有第一种方法灵活。因此，您需要使用一些预定义的布局 - 某种网格。因此，假设您有一个包含 100 个网格块的容器，即 100 个元素来放入您的元素。您现在可以计算 1 到 100 之间的随机数，并将您的元素附加到网格容器中。防止重叠很容易，但这种方法可能并不总是适合您的需求。

3）最简单的方法
如果搜索了很长一段时间，但没有一个插件符合我的需求。所以我自己创建了一个，我发布了并且可以免费使用。您可以在 manuelmaurer.at/randposplugin.php 下找到它。它非常灵活，所以我认为这将是您实现目标的最简单方法。

Answer 3

估计没有插件吧我将像 Sander 建议的那样通过制作预定义的 div 网格并仅将随机图像加载到这些 div 来实现此目的。它比计算图像尺寸/位置更容易、更快，并且完成几乎相同的工作。不是随机的，但视觉上看起来不错:)