我正在尝试以 4 单位宽、任意单位高的网格布局显示图像。
网格中的每个图像可能是 1x1、1x2、2x1 或 2x2 单位。我也在使用 jQuery masonry 来尝试消除布局中的一些空白。
图像显示的尺寸（1x1、2x2 等）是基于其尺寸的“首选”尺寸。
我认为消除布局间隙的最简单方法是在布局中以不同于其首选尺寸的尺寸显示某些图像。我怎样才能在算法上做到这一点，保持以首选尺寸显示的最大照片数量，同时覆盖那些确定为无间隙布局所必需的照片。
视觉示例；我想转这个：
变成他们在这个网站上的东西：http: //500px.com/
您可以做的最简单的事情是将成对的 1x2 组合在一起，将成对的 2x1 组合在一起，并将四组 1x1 组合在一起。布置大量 2x2 的图像很容易，只有奇数图像需要调整大小。这（或类似的东西）几乎肯定是 500px.com 所做的。
我怀疑此解决方案与您的“从左到右，从上到下”的限制并没有真正兼容。但我不确定这个限制到底意味着什么。也许如果您能清楚说明这意味着什么，我们可以为您提供更好的帮助。
Just a start: I think this is an instance of bin packing which is NP-complete in the general case (see this pdf). Might be helpful to start searching for things in those terms... this is not a complete answer by any means.