时间戳

首页 > 解决方案 > 给定容器大小和项目固定纵横比的计算网格布局的算法

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

问题描述

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

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

作为一个加号，我想知道每个元素之间的边距以平均间隔它们。

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

function computeLayout(containerWidth, containerHeight, numElements) {


   // ...

   return { itemWidth, itemHeight, margin }

}

标签： layoutgeometrygrid

解决方案

设元素宽高比为C。我们需要用给定的和将n矩形元素放在矩形容器上。WidthHeight

设未知元素高度为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

推荐阅读