Javascript : Prevent overlapping on images that are sized randomly

I have a gallery in which images endure a rough treatment: they are sized and positioned randomly in a container. Also they are rounded and change size over a mouseclick.. be reassured, it's actually much simpler than it sounds.

Okay, here's a (cute) example of what I mean: http://dl.dropbox.com/u/5550635/Test%20rounded%20gallery/example2.htm

My problem is pretty obvious with the example, images are overlapping most of the time.

Same thing for when you click on one of the images, the other ones go down, and should form a line without overlapping, with maybe a minimum 5 pixels margin between them.

You can see the commented code on the example page.

The CSS is pretty simple:

.project { //class given to the div containing the images
border-radius: 100px;
width: 200px;
height: 200px;
overflow: hidden;开发者_开发知识库
}

#space { //container
width: 550px;
height: 700px;
background: #ccc;
border: 2px solid blue;
}

.parent_project { //parent of the .project div, position absolutely (to fix a problem between position and border-radius)
position: absolute;
}

I've looked around the web for a Javascript solution to prevent overlapping images, but I couldn't find one that fits my specificities. If you just take a look at my problem and share a bit of your science, i'd be very grateful. Thanks!

You'd need to keep track of the circles' midpoints and radii. http://jsfiddle.net/pimvdb/5L9FN/

    var randomdiameter = 100*Math.random()+100; //random diameter
    var randomTop = 400*Math.random(); //random top position
    var randomLeft = 350*Math.random(); //random left position

    while(overlapping(randomTop + randomdiameter / 2,  // x midpoint
                      randomLeft + randomdiameter / 2, // y midpoint
                      randomdiameter / 2)) { // radius
        // generate again if overlapping any other image
        randomTop = 400*Math.random(); //random top position
        randomLeft = 350*Math.random(); //random left position
    }

    images.push([randomTop + randomdiameter / 2, 
                 randomLeft + randomdiameter / 2, 
                 randomdiameter / 2]); // push this image in the array

Then, to check for overlapping you could calculate the distance between each two midpoints and check whether it is smaller than the two radii:

var images = [];

function overlapping(x, y, r) {
    for(var i = 0; i < images.length; i++) { // iterate over all images
        var im = images[i]; // this image

        var dx = im[0] - x; // x distance between this image and new image
        var dy = im[1] - y; // y distance between this image and new image

        if(Math.sqrt(dx*dx + dy*dy) <= im[2] + r) {
            // if distance between midpoints is less than the radii, they are overlapping
            return true;
        }
    }
    return false; // when we reach this point the new image has not been overlapping any
}