Randomly placing images within a <div> and ensuring uniform distribution

Question

I have a rectangular html div with dimensions X by Y. Lets say the center of this div is at x(c) and y(c). I have N images of dimension x(i) and y(i). The images sizes are roughly around 1/8th of the containing div and each image size is different from the rest.

What could be a good way to place these images inside this div so that they are uniformly distributed (yet randomly placed) on each page load. Looking at a javascript implementation.

EDIT: After dascandys answer, I think I could have worded the question better. I meant a random sequence of image load on each page load yet keeping the look and feel balanced.

Answer 1

You're not actually looking for a random distribution. Truly random means that parts of it are empty and that in another corner two of them overlap.

If you want to go scientific, you can use a randomly generated Voronoi diagram with N points and Lloyd's algorithm to move those to a more uniform distribution.

If you prefer the practical approach, just put them in random spots and iteratively see if they're overlapping and if so, move them apart. For 8 images this'll be slower but still beyond human perception quick.