Question

我有一个固定大小的父元素，可以包含不断变化的子元素数，所有子元素都需要以相同的大小和固定的x / y比率显示;并且所有这些都需要尽可能大地显示，而不会溢出父元素的大小。（知道吗？）

如果你看一下我创建的jsfiddle行为方式会更加清晰：

关键位是此功能：

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);
}

它有效，但看起来很笨重。我一直觉得应该有一种方法可以在CSS中做到这一点，但CSS布局规则总是让我的头部受到伤害，无论如何，我无法绕过它的头脑。或者失败了，似乎应该有一种方法可以做到这一点，不需要手动尝试一百个不同的值，然后再确定一个有效的值。

关于如何改善这个的建议？

Answer 1

根据我的研究，似乎没有动态宽度/高度重新调整子元素相对于父元素的大小，以便在没有JavaScript的情况下保持子元素的最大可见性。可能需要改写那句话。

一些想法。

看起来子元素在变得无法使用之前可能会变得非常小。为什么不预先确定所有比率并将它们存储在一个数组中？这将节省确定最大比率的计算。当然，这是假设父宽度和高度不是动态的。我根据你对“视频”一词的使用做出了这个假设。

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

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

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

1 个答案: