如何实现无间隙块布局算法？

Question

我正在尝试以4个单位宽的网格布局显示图像，任意数量的单位高。

网格中的每个图像可以是1x1,1x2,2x1或2x2单位。我也在使用jQuery砌体来尝试消除布局中的一些空白。

图像显示的大小（1x1,2x2等）是基于其尺寸的“首选”尺寸。

我认为消除布局中的间隙的最简单方法是在布局中以不同于其首选尺寸的尺寸显示某些图像。如何以算法方式执行此操作，保留以其首选大小显示的最大数量的照片，同时覆盖那些确定为无间隙布局所必需的照片。

一个视觉例子;我想转此：

与他们在本网站上的内容类似：http://500px.com/

Answer 1

您可以将我接受的答案应用于关联的问题here，然后修改与差距相邻的图片的大小以填充它们。

Answer 2

刚开始：我认为这是bin packing的一个实例，在一般情况下为NP-complete（请参阅this pdf）。可能有助于开始用这些术语搜索事物......无论如何，这不是一个完整的答案。

Answer 3

您可以做的最简单的事情是将1x2组成对，2x1组合在一起，将1x1组合成4x1组合。然后放置大量的2x2很容易，只需要调整奇数图像的大小。这个（或类似的东西）几乎肯定是500px.com所做的。

我怀疑这个解决方案并没有真正与你的“从左到右，从上到下”的限制。但我不确定这种限制究竟意味着什么。也许如果你能说清楚这意味着什么，我们可以更好地帮助你。