1

私のページの 1 つで、サーバーから大量の画像を取得し、それらを画面にダンプし、石積みを使用してそれらをすべてレイアウトするという問題が発生しています。

すべての画像が読み込まれますが、画像が読み込まれる前に石積みが呼び出されているようで、すべての画像が混乱して読み込まれます。お見せするためにいくつかのスクリーンショットを添付しました。これは他のページでも発生することに注意してください。

ここに画像の説明を入力 ここに画像の説明を入力

そして、私が使用している重要なコードのいくつか。

<script>
$.each($('.img-grid-container img'), function (index, obj) {
    $(this).css({
        'width' : (50 + Math.round((Math.random()) * 330))
    });
});
</script>

<script>
var $container = $('.img-grid-container');

$container.imagesLoaded( function(){
    $('#grid-section').fadeIn("normal");
    $('#loader-container').hide();
  $container.masonry({
    itemSelector : '.attachment-full',
  columnWidth: 30
  });
});
</script>

どんな助けでも大歓迎です。

-R

4

1 に答える 1

0

[見た目はかなりクールだと思います。ドラッグ可能にするだけで完了です...] とにかく：

あなたの石積みのコードは私には問題ないように見えます[私はほとんど同じように機能しています]しかし：

  • ドキュメント内のすべての JQuery の準備はできていますか?
  • 最初に組積造を呼び出し、次に #grid-section をフェードインするとどうなりますか?
  • コンテナセレクターが問題なのだろうか。ページにそのクラスの複数のインスタンスがある場合、imagesLoaded がそれらのインスタンスの最初または最後のロード後にトリガーされるかどうかはわかりません..?

[いつでも .masonry('reload') を使用してレンガを並べ替えることができる場合]

それが役立つことを願っています。

于 2012-02-08T16:29:57.260 に答える