javascript - コンテナ内に収まるように要素の寸法を計算する

Question

固定幅 235px、高さ 200px の ul があります。この ul には、クエリの結果に応じて n 個の li が入力されます。ul 内の使用可能なすべてのスペースを埋めるために、li の寸法を計算するにはどうすればよいですか。

コンテナの周長を計算して、各要素の周長の合計と比較しようとしましたが、うまくいきません。

Answer 1

liの数に応じてulの高さを動的にし、css display：inline-blockとoverflow：hiddentoulを適用します

Answer 2

OK、これは、 sが正方形である必要はないが、任意の数のアイテムに対してすべて同じサイズでなければならないulという制約を考慮して、（実際に最大であるかどうかはわかりませんが）かなり高いカバレッジを実現するコードの試みです。li。

最初の部分は、getSquare(n)正方形の生成をメモ化する関数を提供します。これにより、ページ上で複数回使用する必要がある場合でも、再計算を続けることはありません。

2番目の部分は、計算を行う関数です。アイテムの数とコンテナの幅と高さを渡すと、アイテムの幅と高さのプロパティを持つオブジェクトが返されます。整数の結果を保証するものではありません。

スローのある線は、実際にはテスト目的のためにあり、削除することができます。

var getSquare = (function()
{
    var squares = [];
    return function(n)
    {
        if (!squares[n])
        {
            squares[n] = Math.pow(n, 2);
        }
        return squares[n];
    };
})();


function calcItemDimensions(itemCount, areaWidth, areaHeight)
{
    var x, y, slots,
        n = 0,
        sq = 0;

    while (itemCount > sq)
    {
        n += 1;
        sq = getSquare(n);
    }

    x = y = n;
    slots = sq;

    while (slots - itemCount >= x)
    {
        if (x === y) { y -= 1; }
        else { x = y; }
        slots = x * y;
        if (slots < itemCount) { throw new Error('slots < itemCount: ' + slots + ' < ' + itemCount); }
    }

    return { width: areaWidth / x, height: areaHeight / y };
}

Answer 3

幅についてliはまったく言及しないでください

HTML

<div class="wrap">
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
            <li><a href="#">link3</a></li>
    </ul>
</div>

CSS

.wrap{
    width:235px;
    height:200px;
    background:grey
}
ul{background:red; margin:0; padding:0; width:100%;}
li{
    display:inline-block;  
    margin-right:2px;
    background:red;
    border-right:solid black green; 
}

デモ

---

ケース 2

liに追加height:100%し (利用可能な高さ全体をカバーするように li に強制します)、両方に同じ背景色を与えてul & li、利用可能な幅を占めているように見せます

html,body{height:100%}
ul{
   background:red; 
   margin:0; padding:0; 
   width:235px;
   height:200px;
}
li{
    display:inline-block;   height:100%;
    margin-right:2px;
    background:green;
    border-right:solid black green; 
}

デモ 2

Answer 4

必要に応じて、jQuery でこれを行うことができます。

何かのようなもの：

$(document).ready(function(){
   var liCount = parseInt($('ul li').length());
   var height = parseInt($('ul').height();
   var liHeight = height / liCount;
   $('ul li').css('height', liHeight);
});

もちろん、ul と ID を指定して、'ul li' の代わりにこれを jQuery に渡すことを忘れないでください。そうしないと、ページ内のすべての li オブジェクトが影響を受けます。