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

Posted 2023-02-25

【中文标题】在 JavaScript 中生成随机元素位置并防止重叠

【英文标题】：Generate random element position and prevent overlapping in JavaScript

【发布时间】：2010-11-20 04:29:28

【问题描述】：

我在页面上有一个持有人 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>

【问题讨论】：

这取决于您希望它们的随机性...您可以将它们分配给网格，然后它们各自加载到自己保留的单元格/空间内的一个随机位置，永远不会重叠并且仍然是“随机的” .如果您希望它们完全随机，则需要将位置和大小添加到数组中，如果他不是@前一个图像的相同坐标，则为每个图像计算。不知道之前是否已经将类似的东西放入插件中

【参考方案1】：

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

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

【参考方案2】：

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

---

1) 艰难的道路

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

2) 解决方法

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

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

【讨论】：

您的网站似乎已关闭，您会在其他地方发布代码吗？

【参考方案3】：

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