用最大尺寸的矩形填充區域

Question

給定一個我想用相等大小的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函數的作用，我可能會在屏幕底部看到一個完全空的行，但是，有時round會使正方形不適合。 此外，在底行僅包含幾個按鈕的情況下，可以增加寬度，以便在底行上保留較少的空間（盡管當然會保留一些空間）。

所有類似的問題都討論了針對不同大小的矩形的解決方案，我可以使用遞歸或類似的方法來解決，但是我認為這應該簡單得多。

Answer 1

這是一種蠻力方法：

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
}

它返回四個數字：列，行，最后一列的多余像素，最后一行的多余像素。 例如：

 split(300, 100, 12) // 3,4,0,0

使3列和4行，沒有像素要添加。 列寬為300/3 = 100

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

3個列，向最后一個列添加一個px，列寬將為floor（700/3）= 233、233、234

您可以在容器中添加一些填充，而不必使最后一個col / row變寬/ taller。