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

Question

我有一个固定大小的父元素,可以包含更改数量的子元素,所有子元素都需要以相同的大小和固定的x/y比率显示; 并且所有这些都需要尽可能大地显示,而不会溢出父元素的大小.(了解？)

如果你看一下我创建的jsfiddle行为方式,我会更清楚:

http://jsfiddle.net/knbbd/15/

关键位是这里的功能:

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 网格框架。在这里，一旦达到特定数量，您可以重新分配具有特定类的所有子元素。这个最大数量可能需要事先确定。或者，可能有一种简单的方法可以动态计算这个最大数量。

• /sf/ask/5389751/
• http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/
• http://fluidable.com/
• 这个有一个带有视频比例的网格：http://www.alapis.com/The-Golden-Grid/golden3.html