Javascript 图像布局优化

我需要在网站页面上用JavaScript优化图像布局，以使空白量最小化

优化问题基本上是最小化以下各项：

(rightmost x-coordinate of an image - leftmost x-coordinate of an image) +
(bottommost y-coordinate of an image - topmost y-coordinate of an image)

但是，没有图像可以重叠，因此对于每个图像，约束为：

for i in images
    for j in each other image 
        (topmost coordinate of i > bottommost coordinate of j) || 
        (bottommost coordinate of i < topmost coordinate of j) ||
        (leftmost coordinate of i > rightmost coordinate of j) ||
        (rightmost coordinate of i < leftmost coordinate of j)

图像中的i的

对于相互图像中的j
（i的最高坐标>j的最低坐标）|
（i的最底坐标j的最右坐标）||
（i的最右坐标

此外，还有一个约束，即任何图像的最右坐标不能大于页面的宽度，并且任何图像的最左坐标必须大于0

首先，我想把它表述为一个线性规划问题，但是我看到的所有用于JavaScript的线性规划库都不允许如此复杂的约束，所以我认为这可能不是一个线性问题

然后我开始把它看作是一个动态规划问题，但我不知道如何在不尝试所有布局组合的情况下解决它，这将是一个非常缓慢的问题

---

有人知道如何有效地解决这类问题吗？

我想你遇到了NP难问题。我敢肯定维基百科页面提到了一些启发式次优解决方案，它们可能更适合你

事实上，这不能用纯线性规划来实现。但是，可以使用额外的二进制变量（这将使其成为MIP——混合整数规划问题）或使用约束编程技术来表示无重叠约束。是这些约束的一个示例。这个演示也很有趣