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

Question

我正在寻找一种计算网格布局的算法。我最终会用 javascript 编写它，但我正在寻找一个与语言无关的答案。

我有一个容器（具有固定尺寸）和可变数量的元素。

所有元素都具有相同的固定纵横比，并且所有元素都将具有相同的宽度/高度，但它将根据元素数量的比例进行更改以适合容器。

作为一个优点，我想知道每个元素之间的边距以使它们均匀分布。

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

function computeLayout(containerWidth, containerHeight, numElements) {
   // ...
   return { itemWidth, itemHeight, margin }
}

Answer 1

令元素宽高比为

C

。我们需要将

n

矩形元素放置在具有给定

Width

和

Height

的矩形容器上。

设未知元素高度为

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

的差值计算即可