Fixing images of different sizes in a collage

Question

I am looking for a javascript library (or an algorithm that I can implement) to match the number of images of arbitrary sizes on one page with a small number of spaces. Similar to how Google Plus displays images [example] . Or maybe even a little more playful (Google makes them the same height)

It's okay to play with image scaling a bit until the proportions are mixed up and everything looks “good” on the page.

Answer 1

You can use the popular Masonary library.

Dynamic Link Plugin for jQuery Flip Side CSS Posters

Here is an example code ...

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

Here's a source on Github and an interview with David Desandro in the Shoptalk podcast.

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