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

Question

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

我有一个容器(具有固定的维度(和数量可变的元素。所有元素都具有相同的固定纵横比，所有元素都将具有相同的宽度/高度，但它将根据元素数量的比例而变化，以适应容器。

另外，我想知道每个元素之间的间距，以使它们相等。

理想情况下，我用这个签名来设计一个函数：

function computeLayout(containerWidth, containerHeight, numElements) {

// ...
return { itemWidth, itemHeight, margin }
}

Answer 1

设元素宽高比为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的差来计算即可