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のレイアウト規則は常に頭を痛め、とにかく頭を包み込むことはできません。または、それが失敗した場合は、機能する値を決定する前に、100の異なる値を手動で試す必要のない方法があるはずです。

これを改善する方法についての提案はありますか？

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

もう1つのオプションは、CSSグリッドフレームワークを使用することです。ここでは、特定の数に達したら、すべての子要素を特定のクラスに再割り当てできます。この最大数は、事前に決定する必要がある場合があります。または、この最大数をその場で計算する簡単な方法があるかもしれません。

于 2013-01-06T05:22:03.317 に答える