Programmatically arrange rectangular UI objects in an abstract way, without gaps

Question

Given a collection of say, 50, images with various widths and heights, how would one go about programmatically arranging them in an interesting* abstract way? (see image below)

• By interesting I mean, no large gaps, and no easily distinguishable rows or columns (negative space forms a lot of T-like intersections).

For my specific case, all images have a set max dimension of 150px, which could mean the height OR width is a max of 150px (could be 150px by 450px, or 378px by 150px).

This seems like it could be a classic programming challenge but I'm finding the topic hard to Google...

EDIT: Changed image to show that there is no restriction on how the overall arrangement must be (doesn't have to fit inside a set area)

Answer 1

If you are not opposed to jquery plugin, you can check this out - http://masonry.desandro.com/