Javascript 用最大尺寸的矩形填充区域

给定一个屏幕，我想用大小相等的

n

按钮填充它，我如何计算它，使屏幕以最佳方式填充按钮？它适用于用户只需快速选择的移动应用程序

在我最初编写的伪代码中：

ta = w*h; //total area
as = ta/n; //area of each square
ss = sqrt(as); //side square
sh = ceil(w/ss); //squares horizontally
sv = ceil(h/ss); //squares vertically
sw = w/sh; //square width
sh = h/sv; //square height

然而，这有几个问题，首先是由于

ceil

功能，我可能会在屏幕底部出现一个完全空的行，但是

圆形

有时会使正方形不合适。此外，如果最下面一行只包含几个按钮，则可以增加宽度，以便在最下面一行上留下更少的空间（当然会留下一些空间）

---

所有类似的问题都讨论不同大小矩形的解决方案，我可以使用递归或类似的方法来解决，但我认为这应该简单得多。

这里有一个蛮力方法：

function split(w, h, n) {

    var splits = [];

    for(var rows = Math.min(2,n-1); rows < n; rows++) {
        if(n % rows != 0)
            continue;
        var cols = n / rows;
        splits.push([cols, rows, w % cols, h % rows]);
    }

    splits.sort(function(a, b) {
        return (a[2] + a[3]) - (b[2] + b[3]) || (a[0] - a[1]) - (b[0] - b[1]);
    });

    if(splits.length > 0)
        return splits[0];
    else
        return split(w,h,n+1); //in case of primes
}

生成3列和4行，无需添加像素。柱宽为300/3=100

split(700, 220, 12) // 3,4,1,0

3列，向最后一列添加一个px，列宽为地板（700/3）=233233234

---

您可以在容器中添加一些填充物，而不是将最后一列/行加宽/加高。

您在提到矩形时使用“正方形”一词，这让我很不舒服：）看看这里：这里：这些按钮允许改变大小（一点）还是固定的？还有一点我不明白：如果你的方块有一个固定的大小，那么为什么不把它们放在这个区域的左边，让浏览器来处理剩下的部分呢？你能在上为这个树立一个榜样吗？对不起，伙计们，我的网络在发布这个问题几分钟后就死掉了，又回来了，@zyklus：我知道，从正方形开始，然后意识到我在最后用矩形改变了它们，所以问题是关于矩形的，但是起源是正方形@Tariq：第一个问题是关于不同固定大小的盒子，而对我来说，只有盒子的数量是固定的，它们的大小不是Niklas:我想现在也得到了答案：）哦，好吧，现在来看看thg435的答案：DWas希望使用确定性方法，但我想你当时一定是对的，暴力方法是唯一的出路。为了让它工作，你不得不稍微调整一下你的函数，但是做得很好，它最终工作得非常好：D@DavidMulder：不客气为了他人的利益，请随意分享您的改进。当n为素数或n=2时，您的代码中断，因此修复了这两种情况。我的代码的其余部分添加了一个递归最小大小的解决方案，但这似乎太好了：）

split(700, 220, 12) // 3,4,1,0