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

我在页面上有一个holder div，我想在其中随机加载小图像，作为拼贴，每个拼贴上有10px的填充

如何确保图像不会相互重叠或重叠？ 有我可以使用的插件或函数吗

到目前为止，我的代码是：

<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);
        }
    );

}

);

$（文档）.ready（函数（）{
$（“我的画布图片”）。每个(
功能（intIndex）{
var l=Math.floor（Math.random（）*$（“#我的画布”）.width（））；
var t=Math.floor（Math.random（）*$（“#我的画布”）.height（））；
$（this）.css（“左”，l）；
$（this.css（“top”，t）；
$（此）.bind(
“点击”，
函数（）{
警报（“l=“+l+”t=“+t”）；
}
);
}
);

}))；

#我的帆布
{
背景：#eee；
边框：黑色1px实心；
宽度：800px；
高度：400px；
}
#我的画布图片
{
填充：10px；
位置：绝对位置；
}

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

---

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

我想没有插件。我将像Sander建议的那样实现这一点，制作预定义的div网格，并将随机图像加载到这些div中。它比计算图像尺寸/位置更简单、更快速，并且几乎完成相同的工作。不是随机的，但视觉效果很好：）

很抱歉，我挖出了一篇旧帖子，但我最近遇到了一个类似的问题，我花了一些时间找到了完美的解决方案，我现在想与大家分享。有三种方法可以实现这一点

---

1）艰难之路

如果您想自己实现它，您可能会获得最适合您需要的结果。它确实需要一些时间和大量的测试，但实际上，单独实现这样一个功能并不困难。您可以使用随机函数

Math.floor（Math.Random（）*Max）+Min

计算父元素中的随机位置。在定位第一个元素之后，您需要将元素的坐标存储在数组中。现在，在显示下一个元素之前，可以使用数组检查是否存在重叠-如果存在重叠，可以只计算一个新位置。这可能不是最有效的方法，但对于数量不太多的元素，它会非常有效。但我很确定，如果你实现了这个，优化你的算法以提高效率也不会太困难

2）解决方法

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

3）最简单的方法

---

如果搜索了很长一段时间，但没有一个插件适合我的需要。所以我自己创造了一个，我出版了，可以免费使用。你可以在下面找到它。它非常灵活，所以我认为这是实现目标最简单的方法。

这取决于你想要它们的随机性。。。您可以将它们分配到一个网格，然后它们在各自保留的单元/空间内的某个随机位置加载，这些单元/空间永远不会重叠，并且仍然是“随机的”。如果你想让它们完全随机，你需要将位置和大小添加到一个数组中，并计算每个图像，如果他与前一个图像的坐标不同。不知道在你的网站关闭之前，是否已经将类似的东西放入插件，你会将代码发布到其他地方吗？

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