用可变大小的缩略图制作相册的最简单方法是什么？

Question

我想创建一个像 Google+ “来自您的圆子的照片” 的画廊，其中缩略图看起来像拼贴画。

• 缩略图保持照片的长宽比。
• 相册行高接近（不完全相等但非常接近）。
• 缩略图之间的间距均相等。
• 画廊填满一个矩形。
• 照片未被裁剪。它们只是调整大小以填充空间。

请参见屏幕截图作为示例：http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg 我想学习如何使用CSS / JavaScript / jQuery在客户端通过编程方式样式化画廊缩略图。

感谢您的答案！

- Varol

Answer 1

您可能会发现这篇文章有所帮助：构建一个类似谷歌+的图片库 他使用了一种不需要对图像进行排序的技术，而且非常简单。基本上，一旦你知道缩略图行的宽度W，就可以继续放置缩略图，直到总宽度超过W。假设您超过W 40像素，则现在通过CSS在该行中裁剪每个缩略图，以移除40像素。

如果您想从图像中裁剪10像素，可以使用以下代码：

<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
  <img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>

overflow:hidden属性可以裁剪图片，而负边距则让图片在水平方向上居中。

- Derek Kurth

Answer 2

这是经典的切割库存问题。您可以使用分支定界法或动态规划来解决它。

一般来说，谷歌拥有庞大的图片库，因此对于他们来说，找到合适的宽度组合更容易。

对于您，我建议使用有限的纵横比集合（例如16），这将创建有限数量的组合（256）。在转换之前，每张图片都应该缩放或裁剪到最接近的纵横比。

请记住，可能会有非常宽的图片需要一些解决方法：裁剪或者宽度应该是行的宽度，高度可变。同时，间距也需要解决。我会将所有图片放在一行中，并将间距作为白色叠加层覆盖在图片上。

- gertas

Answer 3

我将简化我所看到的内容（例如，我提供的数字不会100%准确），但这将为您提供一种实现此目的的方法。

当我查看屏幕截图时，我看到的是大约4x3纵横比（或3x4反向）的图像列表。这种宽高比是布局的核心。填充的整个矩形可以是任何宽高比的倍数。例如，您将看到每行包含一些肖像和一些风景照片。然而，总体效果是G+可以从大量图像中选择，并因此可以选择满足个别图像的纵横比（给定图像的横向或纵向方面）以及包含矩形的总体宽高比的图像组合。

我会选择可用于池中的图像，并计算它们的宽高比（简单地将宽度除以高度）。然后按其宽高比将图像分组。

最后，布局中棘手的部分是您必须确定哪些宽高比的组合将导致从左到右完全填满一行。从屏幕截图中，我们看到三个这样的例子：

1.第一行= 4张风景照片 2.第二行= 2张风景照片，2张肖像照片和1张正方形照片 3.第三行= 3张风景照片，1张肖像照片和1张正方形照片

结果是，由于所有缩略图具有相同的高度，在这些特定组合中它们的组合宽度给您所需的布局矩形宽度。

因此，我认为解决这个特定问题基本上是解决4个子问题：

1.计算可用“照片池”中所有照片的宽高比 2.列出所有照片宽高比的组合，以获得所需的宽度（以制作单个行） 3.从可用的照片池中找出可以将哪些照片组合成哪些有效组合，从而生成单个组合的图像行 4.最后，步骤1-3创建了一行图像。为了获得整体矩形，您只需使用步骤1-3创建尽可能多的图像行，然后将它们全部叠放在一起。

- jefflunt

---

谢谢您的非常好的回答。虽然我感觉可能有一些更简单、更好的方法（您的方法不能让我在图像上使用自己的排序）。 - Varol

“我的照片排序”是什么意思？我认为G+有一个非常大的图像库，因此几乎可以保证有一组照片可以正确地填满3行图像。 - jefflunt

我指的是按照我的需求对它们进行排序；而不是依赖于它们的长宽比和尺寸。你关于g+的观点是正确的，但并不适用于所有画廊。 - Varol

如果你只有少量的照片（这是有道理的），那么很可能某个照片集合无法组合成你想要的布局。在这种情况下，你可以采取以下几种方法：（1）减少行数，（2）裁剪一些图像（违反你的要求之一）以获得所需的布局，或者（3）添加更多的照片来填补布局中的空缺（这样你就可以获得足够好的行来完成矩形）。如果你有接近正确宽高比的照片，你可以稍微裁剪一下而不被人注意到。 - jefflunt