Generate random element position and prevent overlapping in JavaScript

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 neve

Answer 1

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.