如何显示所有尺寸不同的照片的照片墙（jquery）

Question

我打算展示一个“照片墙”。问题是所有照片都有不同的尺寸和方向（风景/肖像）。例如，当您在股票网站 Dreamstime.com 上搜索照片时，您会注意到我想要实现的设置。 (http://www.dreamstime.com/photos-images/programming.html)。 Google 图片搜索与此类似。

我的问题是：这是怎么做到的？有 jQuery 插件吗？还是我需要获取所有维度，然后使用递归函数将其放入 1 行？或者 1 张图片是否具有多个维度以获得最佳拟合（排序时）？

Answer 1

当您想将其显示为 200 X 200 像素时，加载 500 X 500 像素的图像是个坏主意。 我会建议的是

1. 在您的 php 服务器上即时裁剪图像，然后提供优化的图像。你可以使用像 imagick http://www.imagemagick.org/ 这样的库来完成你的工作。

2. 如果您有一个功能，希望在用户单击小图像时显示更大的图像，则使用 jquery 和其他库通过 ajax 在单击时获取完整大小的图像。

你会在 stackoverflow 上找到很多关于如何使用 imagick 裁剪图像的答案。

编码愉快。

Answer 2

Google 图片和您的示例都将一行中的所有图片高度相同，这很容易实现。我想您真正想要的是一种将不同宽度和高度的图像整齐地放置在网格中的方法。如果是这样，请查看Masonry。