Question

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

因此，输入数据是：

我们有infinite个已知width和height
我们有container已知width且身高无限
我们希望按照优先列数列出的顺序显示图像，调整宽度以适应容器宽度
有时图像覆盖一行或两行或多行以及纵向或横向

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

这是一个包装问题。

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

更新

可以缩放或剪裁图像以更好地适应布局。因此，例如，如果存在用于填充行的正方形图块并且当前图像是纵向图像的位置，则算法可以将图像缩放到可用宽度并将其剪切到可用高度，或者相反。

Answer 1

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

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

javascript

1 个答案: