Photo Grid Like The New Flickr Design

The new responsive photo grid on the new flickr is gorgeous. It's full screen and locks together in an interesting, varied pattern. http://www.flickr.com/photos/delobbo I'd like to

Solution 1:

it's not really that hard. your code has to perform the folloging steps:

1. choose a preferred row-height. this seems to be around 500px on flickr. you can set a fixed value or choose a setting based on the clients screen resolution
2. get the available total width
3. start a new row
4. put in a photo and scale it to row-height and check your row-width
5. repeat 4. until adding a photo makes your row-width exeed the total width
6. scale down the height of this row (and the contained photos) until the width fits
7. start the next line (see 3.)