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行，没有要添加的像素。 Col宽度为300/3 = 100

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

3 cols，将一个px添加到最后一个col，列宽将为floor（700/3）= 233,233,234

您可以在容器中添加一些填充，而不是使最后一个col / row更宽/更高。

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

1 个答案: