Fitting images of different sizes nicely into a collage

Question

I am looking for a javascript library (or algorithm that I can implement) to fit a number of images of arbitrary sizes on a single page with little whitespace remaining. Similar to the way Google Plus displays images [example]. Or maybe even a bit more playful (google makes them identical height) It is OK to play with the scaling of the images a bit, as long as the aspect ratios are not messed up, and things seemingly 'fit' nicely on the page.

Accepted Answer

You can use the popular library Masonary.

A dynamic layout plugin for jQuery The flip-side of CSS floats

Here is a code example...

```
$('#container').masonry({
  itemSelector: '.box'
});
```

Here is the source on Github and an interview with David Desandro on the Shoptalk podcast.

Tip: Make sure the parent container has position:relative so all the content is bound to your container.

Fitting images of different sizes nicely into a collage

Solution

Problem