6

我有一个固定大小的父元素，它可以包含不断变化的子元素数量，所有这些子元素都需要以相同的大小和固定的 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 布局规则总是让我头疼，无论如何，我无法理解它会是什么。或者失败了，似乎应该有一种方法来做到这一点，不需要在确定一个有效的值之前手动尝试一百个不同的值。

关于如何改进的建议？

4

1 回答 1

3

根据我的研究，如果没有一些 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 网格框架。一旦达到特定数量，您可以在此处重新分配具有特定类的所有子元素。这个最大数量可能需要事先确定。或者，可能有一种简单的方法可以即时计算此最大数量。

于 2013-01-06T05:22:03.317 回答