整齐地将物品包装成矩形盒子

时间:2017-08-07 02:46:34

标签: html css css3 grid-layout

我无法想出更优雅的方式来解释这一点。所以我有一个矩形容器和可变数量的项目,我想像这样均匀地填充容器

如果容器的宽高比为1.5且我有6项,则列可能应为3

x x x
x x x

如果容器的宽高比为2.0且我有32项,则列可能应为8

x x x x x x x x
x x x x x x x x
x x x x x x x x
x x x x x x x x

如果比例为2.0并且我有30项,则列可能仍为8

x x x x x x x x
x x x x x x x x
x x x x x x x x
x x x x x x

等等。我觉得这应该很简单,但我不能想到一个简单的方法。输入为itemswidthheight,输出为columns(行将自行填写)

感谢

1 个答案:

答案 0 :(得分:1)

我得到的公式是sqrt(items / aspect_ratio)* aspect_ratio。您可以将此结果四舍五入以在方案3中获得所需结果。

我是怎么做到的:

'aspect ratio just seems to be scale of the number of rows; as such 
columns = rows * aspect ratio
also 
items = rows * columns 
now subbing in / algebra
rows^2 * aspect ratio = items
rows = sqrt(items/aspect ration)
columns = sqrt(items/ aspect ratio) * aspect ratio'