Generate random element position and prevent overl

Question

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>

Answer 1

Sorry for digging out an old post, but I recently came across a similar problem and it took me some time to find the perfect solution - that I now wanted to share. There are tree ways to achieve this.

---

1) The hard way

If you'd like to implement it on your own, you will probably achieve the result best fitting your needs. It does require some time and lots of testing but actually it's not that difficult to implement such a feature on your own. You can use the Random-Functions Math.floor(Math.random() * Max) + Min to calculate a random position in the parent element. After positioning the first element, you need to store the coordinates of the element, in an array for instance. Now before you show the next element you can use the array to check if there are overlaps - if so, you can just calculate a new position. Isn't the most efficient way to do this probably but it'll work quite well for not so big amounts of elements. But I'm pretty sure that if you implemented this, it's also not too difficult to optimize your algorithm in order to make this more efficient.

2) The workaround way

The second way to achieve this is ways easier then the first way but also not as flexible. Therefore you'd need to use some predefined layout - some kind of a grid. So lets assume that you have a container with 100 grid-blocks, so 100 elements to put your elements in. You could now just calculate a random number between 1 and 100 and append your element to the grid-container. It's quite easy to prevent overlapping but this way of doing it might not always fit your needs.

3) The easiest way If searched quite a while but there was not a single plugin which fit my needs. So I created one on my own, which I published and which can be used for free. You can find it under manuelmaurer.at/randposplugin.php. It's pretty flexible so I think this one would be the easiest way for you to achieve your goals.

Answer 2

I guess there is no plugin. I will implement this like Sander suggested by making predefined div grid and just loading random images to those divs. It's easier and faster than calculating image dimenssions/positions and does pretty much the same job. Not random but visually looks good :)

Answer 3

Store the picked coordinates in an array, so that you can compare the coordinates of each new image you place against the previous.

If the coordinates that you picked overlaps a previous image, pick new coordinates. Limit the number of tries so that if you can't place an image with say 1000 tries, you start over with the first image.