Photo grid like the new flickr design

Question

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 emulate this for a project, but dont even know where to start. I've looked at the code a bit, but it's pretty difficult to understand exactly what's going on here.

Anyone have any ideas on how they've been able to accomplish such a flexible grid that fits together so well?

Answer 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.)