4

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

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

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

任何人对他们如何能够完成如此完美地融合在一起的灵活网格有任何想法吗？

4

1 回答 1

7

这并不难。您的代码必须执行以下步骤：

  1. 选择首选的行高。这似乎500px在 flickr 上。您可以设置固定值或根据客户端屏幕分辨率选择设置
  2. 获取可用的总宽度
  3. 开始新的一行
  4. 放入照片并将其缩放到行高并检查您的行宽
  5. 重复4.直到添加照片使您的行宽超过总宽度
  6. 缩小该行（以及包含的照片）的高度，直到宽度适合
  7. 开始下一行（见3.）
于 2013-05-30T05:07:32.067 回答