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

Question

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

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

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

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

谢谢你的回答！

Answer 1

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

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

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

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

Answer 2

您可能会发现这篇文章很有用： 构建Google Plus灵感图片库

他使用的技术不需要对图像进行排序，而且非常简单。 基本上，一旦你知道你的缩略图行的宽度W，继续放置缩略图直到总宽度超过W.假设你超过W 40 xx。 现在，裁剪行中的每个缩略图（通过css）以删除总共40个像素。

例如，如果您想从图像中裁剪10px，可以使用以下内容执行此操作：

<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>

溢出：隐藏作物图像，负边缘基本上水平居中。

Answer 3

我将简化我看到的内容（例如，我提供的数字不是100％，像素精确到准），但它会为您提供一种方法来实现这一目标。

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

我会拍摄池中可用的图像，并计算它们的宽高比（简单宽度除以高度）。 然后按图像宽高比对图像进行分组。

最后，关于布局的一个棘手的部分是你必须弄清楚哪种宽高比组合将产生一个从左到右完全填满的行。 从截图中我们看到三个这样的例子：

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

结果是，由于所有缩略图都具有相同的高度，因此它们在这些特定组合中的组合宽度为您提供了布局矩形所需的最终宽度。

所以，我认为解决这个特殊问题基本上是解决4个子问题：

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