Photo grid like new flickr design

Question

The new sensitive photo grid on the new flickr is great. It is full screen and locked together in an interesting, diverse pattern.

http://www.flickr.com/photos/delobbo

I would like to imitate this project, but I don’t even know where to start. I looked at the code a bit, but it's pretty hard to understand what is going on here.

Does anyone have any ideas on how they were able to make such a flexible grid that blends well?

Answer 1

This is not so difficult. Your code should follow these steps:

• Choose your preferred line height. it seems to be around 500px on flickr. you can set a fixed value or select a parameter based on the resolution of the client screen.
• get available total width
• run a new line
• add a photo and enlarge it to the line height and check the line width
• repeat 4. until adding the photo makes the line width wide
• reduce the height of this line (and the contained photos) until the width becomes
• run the following line (see 3.)