JavaScript中的图像打包算法

Question

我想创建一个图像列表，其中包含与您查看相册时相同的图像：

因此，输入数据为：

1. 我们有infinite已知width和height的图像列表
2. 我们有一个已知width和无限高度的container
3. 我们希望按照在首选列数上列出的顺序显示图像，并调整其宽度以适合容器的宽度
4. 有时图像以纵向或横向覆盖一两行或多行

一些涵盖可能情况的ascii场景：

|------------------|------------------|------------------|
|                  |                  |                  |
|   Normal tile    |    Normal tile   |    Normal tile   |
|                  |                  |                  |
|------------------|------------------|------------------|
|                                     |                  |
|        Landscape tile               |                  |
|                                     |                  |
|------------|------------------------|------------------|
|            |                        |                  |
| Smaller    |  Landscape tile        |    Normal tile   |
|            |                        |                  |
|------------|--|------------------|--|------------------|
|               |                  |                     |
| Portrait tile |    Normal tile   |    Larger tile      |
|               |                  |                     |
|               |------------------|---------------------|
|               |                     |                  |
|               |    Larger tile      |    Normal tile   |
|               |                     |                  |
|---------------|---------------------|------------------|

我考虑过使用D3 js中的Treemap算法，但是由于我不知道容器的高度，因此我不确定这是否是正确的选择。

树形图

这是包装问题。

任何帮助或想法将不胜感激！

更新

可以缩放或裁剪图像以更好地适合布局，这是可以接受的。 因此，例如，如果有一个正方形瓷砖可以填充一行并且当前图像是人像，则该算法可以将图像缩放到可用宽度并将其裁剪到可用高度，或者反过来。

Answer 1

设置图块的最小可接受面积和该行的标准高度。

1. 以一幅显示图像，调整图块以使其高度等于行高。 如果您没有下一个图块的位置，我们可以展开所有完成的行，以便其宽度为最大宽度，然后转到下一行。 我们也可以不扩展而继续前进，因为使用肖像似乎是不可能的。 注意，风景瓷砖不是特例。
2. 低行。 如果图像太低和太宽而无法适应行的高度和宽度，则使一个图块的较低行，使图块的宽度适应行的宽度。 （您已经忘记了这种情况，这使得在没有出现半空行的情况下始终无法按顺序显示图像）您应该将该图像放置在最后一个填充的行之后，并具有更低的边框（不扩展纵向）。 如果没有这样的行，则添加到开头。 因此，您必须记住添加普通图片的最后一个位置和可以添加低行的最后一个位置。
   2.1。 低行的另一个可能位置是最后一个缩短的行，其宽度与下一个缩短的行相同。 （寻找肖像）
3. 如果调整后的图块的面积小于最小可接受范围，则将创建一个“人像”。
   3.1。 根据最小面积，我们计算肖像的身高-以行为单位。 另外，它的高度和宽度。
   3.2。 由于我们无法真正跟上原始顺序，因此将肖像放到左侧。 接下来的几行，包括这一行，将被缩短。
   3.3。 如果从该行开始或继续有几幅肖像，则应根据其下边框从最低到最高排序。 但是无论如何，如果上一行以2高肖像开始，而现在又有另一幅这样的肖像，那么下一行将有空隙。
   3.4。 如果有缝隙，我们会记住它，而将来，当我们有正常的照片或合适的肖像时，我们会将其插入到缝隙中。 差距不会很复杂，请看下一点。
   3.5。 如果可能有大量的肖像（最好认为这是可能的），请检查将来的图像以获取可能的肖像，并且如果两行中有超过1张，请增加当前的标准行高度。 另外，当然，将找到的所有肖像移到该较高的行。 之后，将标准行高放回原处。