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

Question

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

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

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

任何人都对如何能够如此完美地完成如此灵活的网格有任何想法？

Answer 1

这并不是那么难。您的代码必须执行以下操作步骤：

1. 选择首选行高。这似乎是关于flickr的500px。您可以设置固定值或根据客户端屏幕分辨率选择设置
2. 获取可用的总宽度
3. 开始新行
4. 放入照片并将其缩放到行高并检查行宽
5. 重复 4。直到添加照片会使您的行宽度达到总宽度
6. 缩小此行的高度（以及所包含的照片），直到宽度适合
7. 开始下一行（请参阅 3。）