计算给定容器大小和项目固定纵横比的网格布局的算法

Question

我正在寻找一种算法来计算网格布局。最后我会写在 javascript 中，但我正在寻找不可知论语言的答案。

我有一个容器（具有固定尺寸）和可变数量的元素。所有元素都具有相同的固定纵横比，所有元素都将具有相同的 width/height，但它会根据元素数量的比例变化以适应容器。

作为一个加号，我想知道每个元素之间的边距以 space 它们相等。

理想情况下，我想象一个具有此签名的函数：

function computeLayout(containerWidth, containerHeight, numElements) {


   // ...

   return { itemWidth, itemHeight, margin }

}

Answer 1

设元素width/height的比例为C。我们需要在给定 Width 和 Height.

的矩形容器上放置 n 个矩形元素

设未知元素高度为h，宽度为w = C * h

每行网格包含 nr 个元素

nr =  Floor(Width / (C * h))   // rounding down

每列包含 nc 行

nc = Floor(Height / h)

所以我们可以写出不等式来为n个元素提供位置：

n <= nc * nr
n <=  Floor(Width / (C * h)) * Floor(Height / h)

并求解 h（因此找到最大可能的 h 值）

h的初始近似值：

h0 = Ceil(Sqrt(Width * Height / (n * C)))   //rounding up

然后我们可以递减 h 值直到不等式变为真：

while (n > Floor(Width / (C * h)) * Floor(Height / h))
   h--;

边距引入了额外的可变性。我们可以预定义边距值并在 nc, nr 公式中使用它（使用 h + margin、C * h + margin）

如果您想获得最小利润（可能为零）- 只需根据 Height 和 nr*h

的差值进行计算

Algorithm to compute a grid-layout given container size and items fixed aspect ratio