Javascript 在父元素中布局数量可变的可调整大小的子元素的最佳方法<；部门>；？

我有一个固定大小的父元素，它可以包含数量不断变化的子元素，所有子元素都需要以相同的大小和固定的x/y比率显示；所有这些都需要显示得尽可能大，而不会溢出父元素的大小。（明白了吗？）

如果您看看我创建的JSFIDLE，它的行为将更加清晰：

这里的关键位是此函数：

function layout(parent, parentHeight, parentWidth, children, ratio) {
    var totalArea = parentHeight * parentWidth;
    var elements = children.length;
    var height = 0, width = 0, area = 0, cols = 0, rows = 0;
    for (height = parentHeight; height > 0; height--) {
        width = height * ratio;
        area = width * height * elements;
        cols = Math.floor(parentWidth / width);
        rows = Math.ceil(elements / cols);
        if (area <= totalArea && cols * width < parentWidth && rows * height < parentHeight) {
            break;
        }
    }
    $(children).width(width - 10).height(height - 10);
    $(parent).width(parentWidth).height(parentHeight);
}

函数布局（父级、父级高度、父级宽度、子级、比率）{
var totalArea=父高度*父宽度；
var元素=children.length；
变量高度=0，宽度=0，面积=0，列数=0，行数=0；
对于（高度=父级高度；高度>0；高度--）{
宽度=高度*比率；
面积=宽度*高度*元素；
cols=数学地板（宽度/宽度）；
行=Math.ceil（元素/列）；
如果（area根据我的研究，似乎不可能在不使用JavaScript的情况下动态调整子元素相对于父元素的宽度/高度，以保持子元素的最大可见性。可能需要改写该句子

一些想法

似乎子元素在变得不可用之前只能变得很小。为什么不先确定所有的比率并将它们存储在一个数组中？这样就省去了确定最大比率的计算。当然，这是假设父元素的宽度和高度不是动态的。我是根据你使用这个词而做出的假设“视频。”

另一种选择是使用CSS网格框架。在这里，一旦达到特定数量，您可以重新分配具有特定类的所有子元素。这个最大数量可能需要事先确定。或者，可能有一种简单的方法可以动态计算这个最大数量





具有具有视频比率的网格：
什么意思
在确定一个有效的值之前尝试100个不同的值
？您是在谈论比率（脚本中的1.5）？脚本所做的是从子项的最大可能大小（即其父项的高度）开始，然后慢慢减小建议的大小，直到找到适合所有对象的大小。这就是我所说的“尝试100个不同的值”。（实际上可能不是100个，如果只有一个项目，它将只尝试一个值，但可能会有很多。）好问题。我希望这能回答关于预计算大小、子容器等的好问题。在我的例子中，父容器可能正在更改大小，但我可以（a）缓存所有内容直到大小更改，或者（b）使用二进制搜索而不是蛮力遍历可能的大小，这将显著减少尝试次数。
Width   Height  Max Children
189.5   123     2
138.5   89      4
122     78      6
89      56      12
69.5    43      15
63.5    39      20
56      34      24
48.5    29      30