html - 用可变数量的正方形填充网页 - 填充屏幕并在末尾填充最少的空白空间

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 注意：这不是最佳算法，但相当不错