制作具有可变大小缩略图的照片库的最简单方法是什么？

Question

我想创建一个像 Google+“来自你的圈子的照片”这样的图库，其中缩略图看起来像拼贴画。

• 缩略图保持照片的纵横比。
• 画廊行的高度接近（不相等但非常接近）。
• 缩略图之间的间距到处都是相等的。
• 画廊填充一个矩形。
• 照片未裁剪。它们只是调整大小以填充空间。

请参阅屏幕截图作为示例： http://ansonalex.com/wp-content /uploads/2011/07/google-plus-gallery-large.jpg

我想了解如何使用 css/javascript/jquery 在客户端设置这样的画廊缩略图样式以编程方式。

谢谢各位的解答！

Answer 1

您可能会发现这篇文章很有帮助：构建一个受 Google Plus 启发的图片库

他使用了一种不需要对图像进行排序的技术，而且非常简单。基本上，一旦您知道缩略图行的宽度 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 裁剪图像，负边距基本上将其水平居中。

Answer 2

这是典型的切削库存问题。您可以使用分支定界法或动态编程。

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

对于您来说，我建议使用有限的长宽比集（例如 16），这会创建有限数量的组合（256）。转换前的每张图片都应缩放或裁剪为最接近的宽高比。

请记住，可能有非常宽的图片需要一些解决方法：裁剪或它们的宽度应该是行的宽度和高度变量。间距也需要以某种方式解决。我会将所有图片排成一排，并将间距作为白色叠加在图片上。

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 创建任意多行图像，然后将它们全部堆叠在一起。