以编程方式以抽象方式排列矩形UI对象，没有间隙

Question

考虑到50个具有不同宽度和高度的图像的集合，如何以有趣的*抽象方式以编程方式排列它们？ （见下图）

• 有趣的是，我的意思是，没有大的间隙，也没有容易区分的行或列（负空间形成很多类似T的交叉点）。

对于我的具体情况，所有图像的最大尺寸设置为150px，这可能意味着高度或宽度最大为150px（可能是150px乘450px，或378px乘150px）。

这似乎可能是一个经典的编程挑战，但我发现Google很难找到这个话题......

编辑：更改图像以显示整体排列方式没有限制（不必适合设定区域）

Answer 1

如果您不反对jquery插件，可以查看 - http://masonry.desandro.com/

Answer 2

您的问题是NP-Hard。

This thread表明，即使有一种类型的nXm矩形，如果有一个解决方案，也很难找到NP-Hard，所以你更普遍的问题当然也是NP-Hard [只有一种类型的矩形是这个问题的私人案例]

如果您使用优化解决方案，或者backtracking或genetic algorithms等启发式方法，您可以尝试hill climbing解决方案，这会更快 - 但通常会找到非最佳解决方案结果

Answer 3

我已经构建了类似的东西（虽然它可能不是最复杂的解决方案）。我的方法是使用quadtree来组织我放在画布上的矩形。然后我基本上绕着螺旋中心点，试图放置新的矩形，并使用四叉树来检测碰撞。如果我检测到碰撞，那么我会将我试图放置的矩形移动到距离中心最远的矩形边缘并重复碰撞检查过程。

同样，可能不是最复杂的方法，它确实会在矩形之间留下一些较大的间隙（它们之间的边界不均匀），但根据我的喜好，它给出了很好的结果。