照片网格像新的flickr设计 [英] Photo grid like the new flickr design

问题描述

新的flickr上的新的响应式网格是华丽的。

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?

推荐答案

这不是真的那么难。您的代码必须执行下列步骤：

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

1. 选择首选的行高。这似乎是在flickr的 500px 。您可以根据客户端屏幕分辨率设置固定值或选择设置。


2. 获取可用的总宽度


3. 开始新行


4. 放置照片并将其缩放到行高并检查您的行宽


5. 重复 4。


6. 缩小此行（以及包含的照片）的高度，直到宽度适合


7. 启动下一行（参见 3。）

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

这篇关于照片网格像新的flickr设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！