javascript - javascript中的图像打包算法

Question

我想创建一个图像列表，就像 Facebook 在您查看相册时所做的那样:

所以，输入数据是:

1. 我们有一个无限的图像列表，其中的图像具有已知的宽度和高度
2. 我们有一个容器，它的宽度已知，高度无限
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 算法，但我不确定这是否是正确的选择，因为在我的问题中我不知道容器的高度。

Treemap

这是一个打包问题。

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

更新

可以接受缩放或裁剪图像以更好地适应布局。 因此，例如，如果有地方可以让方形图 block 填充一行并且当前图像是纵向图像，则算法可以将图像缩放到可用宽度并将其裁剪到可用高度，或者相反。

Answer 1

设置磁贴的最小可接受区域和行的标准高度。

1. 一张一张地显示图片，调整图 block ，使其高度等于行高。如果您没有下一个瓷砖的位置，我们可以展开所有完成的行，使其宽度为最大宽度，然后转到下一行。我们也可以在不扩展的情况下继续，因为肖像似乎是不可能的。请注意，景观瓷砖不是特例。
2. 低行。如果图像太低太宽而无法适应行高和宽度，请制作一个低行的一个图 block ，使图 block 的宽度适应行宽。 (你已经忘记了那种情况，如果没有半空行的出现，这使得总是按顺序显示图像是不可能的)你应该将该图像放在最后一个填充行之后，边框甚至更低(不扩展肖像)。如果没有这样的行，添加到开始。所以，你要记住最后添加普通图片的地方和最后可以添加低行的地方。
   2.1.低行的另一个可能位置是最后一个缩短的行，其宽度与下一个缩短的行相同。 (寻找肖像)
3. 如果调整后的图 block 面积小于可接受的最低限度，您将创建一个肖像。
   3.1.根据最小面积，我们计算肖像的 iheight - 以行为单位测量。还有，它的高度和宽度。
   3.2.由于我们无法真正跟上源顺序，我们将把肖像放在左边。接下来的几行(包括这一行)将被缩短。
   3.3.如果有几幅肖像，从那一排开始或继续，则应根据其下边框从低到高排序。但是无论如何，如果我们有前一行以 2-high 肖像开始，而我们现在有另一个这样的肖像，那么下一行就会有一个空白。
   3.4.如果我们有空隙，我们会记住它，并且在将来我们有一张普通图片或合适的肖像时，我们会把它插入空隙中。差距不会很复杂，看下一点。
   3.5.如果可能有大量肖像(最好认为这是可能的)，请检查 future 图像中可能的肖像，如果两行超过 1 个，则增加当前的标准行高。此外，当然，将所有找到的肖像移动到更高的行。之后，您可以降低标准行高。