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

Posted 2023-03-17

【中文标题】给定容器大小和项目固定纵横比的计算网格布局的算法

【英文标题】：Algorithm to compute a grid-layout given container size and items fixed aspect ratio

【发布时间】：2021-09-12 20:25:08

【问题描述】：

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

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

另外，我想知道每个元素之间的边距以平均间隔它们。

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

function computeLayout(containerWidth, containerHeight, numElements) 


   // ...

   return  itemWidth, itemHeight, margin 

【参考方案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 的差值计算即可

【讨论】：

嘿@Mbo 感谢您的回答。思路很清晰，但在某些情况下不起作用，请参阅这个包含 5 个元素的示例：codesandbox.io/s/gifted-chaplygin-d2gd7

（如果你愿意，很高兴在聊天中讨论！）

我在停止条件下的错误。更正为while ( numElements >（4 个元素为 h=225，5 个元素为 h=200）。为了避免对大值进行过多的迭代，可以使用二分搜索。