html - 实现具有不同行高的流畅图片网格

Question

我在实现流畅图片网格的设计师目标时遇到了麻烦，但基于同样高的图片行，而不是每个人似乎都非常喜欢的等宽列。

这是他的设计:

https://dl.dropboxusercontent.com/u/7187819/Capture.PNG

这是我卡住的地方: http://jsfiddle.net/EwTjD/1/

我的目标是当你调整浏览器大小时，一个流畅的图片网格会随着旁边的 map 缩放。

我首先尝试了 background-image，但是这让我陷入了无法缩放的高度。为了能够使用 transform，我必须使用 position:absolute，这会弄乱我的 float img...

有什么帮助吗？ :)

ps:这个应该不用Javascript就可以实现

Answer 1

我将开始为人们的工作收费。哈哈。

如果你想让它们水平排列，你需要设置静态高度。

在您的设计示例中，这些图片尺寸经过仔细计算。你需要考虑填充量，加上将使用多少填充空间，然后从你得到的空间总量中减去它。然后你可以在图像之间划分它