填充具有可变数量的正方形的网页 - 填充屏幕，最后填充最少的空白空间

Question

给定n个正方形（必须是彼此相同的大小），我想用这些正方形填充网页，以便最大化屏幕空间并导致最小数量的空方格在结束。有任何想法吗？我看到有关打包算法的一些内容......

方块无法旋转。它们将以html表示，例如：

<div class="row"><span class="square"></span><span class="square"></span><span class="square"></span><span class="square"></span></div>
<div class="row"><span class="square"></span><span class="square"></span><span class="square"></span><span class="square"></span></div>

css:

.square {
    height: x;
    width: x;
}

Answer 1

如果它们是正方形，则可以简化问题。你可以从正方形中获得很多变化。

如果你的意思是矩形，那么是的，2d bin包装就是你想要的。这是一个使用不同大小的矩形的有趣的javascript实现： http://incise.org/2d-bin-packing-with-javascript-and-canvas.html 注意：这不是最佳算法，但非常好