1

シナリオ

私はコンテナーを持っています (もっとあります)。リスト項目が内部にあり、それぞれに画像が含まれています。コンテナーの高さは、メディア クエリ内で変化するリスト アイテムの高さに対して動的です。コンテナーには最小の高さがあるため、画像が大きい場合は、コンテナーのサイズを調整して下にスライドさせることをお勧めします。

現在、ページの読み込み時に画像リスト項目の高さを取得していますが、画像がかなり多いため、調整に時間がかかる可能性があるため、これはうまくいきません。

残念ながら、これは非常に大規模なプロジェクトであり、jsfiddle でシナリオを正確に再現することはできません。これで十分だと思います。

解決

読み込まれる最初の画像のリスト項目の高さを取得し、コンテナを同じ高さにする方法が必要です。

コード

HTML

<ul class="container">
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
...so on
</ul>

CSS

li {
    list-style: none;
}
.img {
    float: left;
    height: 100px;
    overflow: hidden;
    width: 50px;
}
.container {
    border:5px solid green;
    width:100%;
    overflow: hidden;
    min-height:100px;
}
@media only screen and (max-width: 500px) {
    .img {
        width: 25%; height: auto;
    }

}

JS

$(window).load(function() {

    $('.container').each(function() {
        $(this).animate({
            height: $('.img').height(),
            slideDown: 'fast'
        });
    }); 

});

デモ

http://jsfiddle.net/ZwQu7/1/

お時間をいただきありがとうございます。

4

3 に答える 3

1

実際のサイズにアクセスする前に画像をロードする必要がありますがgetimagesize()、サーバー側で合計初期サイズを計算するために使用できます (php を使用していると仮定します)。

または、すべての画像のサイズがわかっている場合 (100px と書いているようです)、最初の数を掛けて全体の高さを取得できます。

または、画像の読み込み時にコンテナーの高さにピクセルを追加します。

$('.container img').on('load', function() {
    var $c = $(this).parents('.container');
    $c.css('height', (($c.height() || 0) + this.height) + 'px');
});
于 2013-08-07T11:21:05.703 に答える