5

I have a holder div on the page where I want to load small images in on random position as a collage with 10px padding on each.

How can I make sure that images never overlap each other or holder div? Is there a plugin or function that I could use?

My code so far:

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

3 回答 3

3

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

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

于 2009-08-17T09:09:33.007 回答
2

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

1）艰难的道路

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

2）解决方法

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

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

于 2017-04-11T11:57:25.257 回答
0

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

于 2009-08-18T08:23:16.890 回答