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

我有一个持有人div在页面上，我想随机位置加载小图像作为每个10px填充拼贴。生成随机元素位置，并防止在JavaScript中重叠

我怎样才能确保图像不会互相重叠或持有人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>

来源

2009-08-17 jpkeisala

它取决于你想要它们是多么随机...... 你可以将它们分配给一个网格，然后它们每个都加载在它们自己的保留单元/空间内的一个随机位置上，永远不会重叠并且仍然是“随机的”。如果您希望它们完全随机，您需要将位置和大小添加到数组中，并为每个图像计算，如果他不是先前图像的相同坐标。不知道如果像这样的东西已被放入插件之前虽然 – Sander 2009-08-17 09:13:09

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

来源

2009-08-18 08:23:16 jpkeisala

存储在数组中拾取坐标，这样就可以比较你将较上日每一个新形象的坐标。

如果您选取的坐标与先前的图像重叠，请选取新的坐标。限制尝试的次数，以便如果您不能放置图片说1000次尝试，您重新开始第一个图像。

来源

2009-08-17 09:09:33 Guffa

对不起挖掘旧帖子，但我最近遇到了类似的问题，我花了一些时间来找到完美的解决方案 - 我现在想分享。有树方法来实现这一点。

1）硬办法

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

2）解决方法方式

实现这一目标的第二种方式是更容易的方式，则第一种方式，但还不够灵活。因此你需要使用一些预定义的布局 - 某种网格。所以我们假设你有一个有100个网格块的容器，所以有100个元素可以放入你的元素。现在你可以计算一个1到100之间的随机数并将你的元素附加到网格容器中。防止重叠很容易，但这种做法可能并不总能满足您的需求。

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

来源

2017-04-11 11:57:25

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

回答

相关问题