照片网格就像新的flickr设计一样

Question

新flickr上新的响应式照片网格非常漂亮.它是全屏的,并以一种有趣,多变的模式锁定在一起.

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

我想为一个项目效仿这个,但是甚至不知道从哪里开始.我已经看了一下代码,但是很难理解这里到底发生了什么.

任何人都有任何想法,他们如何能够完成如此灵活的网格？

Answer 1

这不是那么难.您的代码必须执行folloging步骤:

1. 选择首选行高.这似乎是500px在flickr上.您可以设置固定值或根据客户端屏幕分辨率选择设置
2. 获得可用的总宽度
3. 开始新的一行
4. 放入照片并将其缩放到行高并检查行宽
5. 重复4.直到添加照片使您的行宽度达到总宽度
6. 缩小此行的高度(以及包含的照片),直到宽度适合
7. 开始下一行(见3.)