javascript中的图像打包算法

我想创建一个图像列表，其打包方式与Facebook在查看相册时的打包方式相同：

因此，输入数据为：

我们有一个

无限

图像列表，其中包含已知的

宽度

和

高度

我们有一个

容器

，具有已知的

宽度

和无限高

我们希望按照图像在首选列数上列出的顺序显示图像，调整其宽度以适应容器宽度

有时图像覆盖一行、两行或多行以及纵向或横向

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

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

我考虑过使用D3JS中的Treemap算法，但我不确定这是否是正确的选择，因为在我的问题中，我不知道容器的高度

这是包装问题

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

更新

可以对图像进行缩放或剪裁，以更好地适应布局。

---

因此，例如，如果有一个正方形瓷砖可以填充一行，而当前图像是纵向图像，则该算法可以将图像缩放到可用宽度并将其剪裁到可用高度，或者反过来

设置瓷砖的最小可接受面积和行的标准高度

逐个显示图像，调整平铺，使其高度等于行高度。如果您没有位置放置下一个磁贴，我们可以展开所有已完成的行，使其宽度为最大宽度并转到下一行。我们也可以不扩展而继续，因为肖像画似乎是不可能的。请注意，景观瓷砖不是特例

低排。如果图像太低和太宽，无法适应行高和行宽，则制作一个低的一行平铺，使平铺的宽度适应行宽。（您已经忘记了这种情况，这使得在不出现半空行的情况下，始终按顺序显示图像是不可能的）您应该将该图像放在最后一个填充行之后，并具有更低的边框（不延伸肖像）。如果没有这样的行，则添加到起始行。因此，您必须记住最后一个添加普通图片的位置和最后一个可以添加低行的位置。
2.1. 低行的另一个可能位置是最后一个缩短行，其宽度与下一个缩短行相同。（寻找肖像）

如果调整后的瓷砖面积小于最小可接受范围，则您将创建一幅肖像。
3.1. 根据最小面积，我们计算出肖像的高度——按行测量。还有，它的高度和宽度。
3.2. 由于我们不能真正跟上源顺序，我们将把肖像放在左边。接下来的几行，包括这一行，将被缩短。
3.3. 如果有几幅肖像画，从那一排开始或继续，则应根据其下边框从最低到最高排列。但是无论如何，如果我们有前一行以2高肖像开始，而我们现在有另一个这样的肖像，那么下一行将有一个间隙。
3.4. 如果我们有一个间隙，我们会记住它，当将来我们有一张正常的照片或一张合适的肖像时，我们会把它插入间隙中。差距不会很复杂，请看下一点。
3.5. 如果可能出现大量肖像（最好认为可能），请检查未来图像中可能出现的肖像，如果两行的肖像数量超过1，请增加当前的标准行高度。当然，也可以将所有找到的肖像移到更高的一行。之后，将标准行高度放回原处

---

您可能需要检查Flexbox网格系统。树映射不是这里的最佳选择。树映射的孔点根据传递的值和平铺方法动态生成矩形。这显然不是您想要的，因为您已经为每个元素预定义了宽度和高度。谢谢@NicoVanBelle，这看起来是一个很好的资源！整点，而不是洞点，对不起（S.O.真的应该增加编辑评论的5分钟宽限期）。如果瓷砖的水平尺寸非常不稳定，我不会谈论柱。我认为，试着去想它们，你是在给自己制造麻烦。如果你查看Facebook如何显示一张专辑的图片，你会发现没有差距。我的猜测是，有能力决定一幅图像将被剪裁的比例和数量，就能解决这个缺口问题。这个缺口出现在创作的某个阶段，而不是最终结果。顺便说一句，你从哪里得到的信息，Facebook在任何宽或高图片的组合上以这种或那种方式显示图片？你测试过他们的算法吗？您正在展示的示例是绝对原始的-几乎所有的图片都是关于正方形的。