图片布局优化答案

【问题标题】：Image layout optimization图片布局优化
【发布时间】：2016-04-01 05:17:06
【问题描述】：

我需要在网站页面上使用 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)

另外还有一个限制，就是图片的最右边的坐标不能大于页面的宽度，图片的最左边的坐标必须>0。

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

然后我开始认为这是一个动态编程问题，但如果不尝试每种布局组合，我不确定如何解决它，这会非常慢。

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

【问题讨论】：

标签： javascript optimization dynamic simplex

【解决方案1】：

我认为您遇到了 NP 难的cutting stock problem。我确信 Wikipedia 页面引用了一些可能更适合您的启发式次优解决方案。

【讨论】：

【解决方案2】：

确实，这不能使用纯线性规划来完成。然而，可以使用额外的二进制变量（这将使其成为 MIP——混合整数规划问题）或使用约束规划技术来制定无重叠约束。 Here 是这些约束的一个示例。这个演示Constraint programming in the browser也很有趣。

【讨论】：