1

私は、画像を表示する単一ページの JavaScript アプリケーションをコーディングしています。私が使用しているライブラリは jQuery(1.7.2) と isotope の最新バージョンです。

アプリに無限スクロールを実装しようとしています。ページの一番下までスクロールすると、ajax がサーバーと通信し、JSON でオブジェクトの配列を返します。この JSON は、各画像に関する情報と画像自体を含むいくつかの div を構築するために使用されます。

同位体対応コンテナーに作成されたときに、各 div を追加しています。私の ajax 呼び出しの完全なセクションでは、isotope("reLayout") を呼び出しています。これは十分に機能します。

私の問題は、1ダースのdivを追加するとアイテムが「フラッター」するため、アイテムを最後に配置することです。addItems、insert、appended、および isotope("reLayout") を使用せずにさまざまな順列を試しましたが、役に立ちませんでした。

ajax を使用した画像を含むアイテムを、オーバーラップしたりフラッターしたりせずに追加するにはどうすればよいですか?

よろしく、ニック

4

1 に答える 1

6

参考になるかわかりませんが、以下に抜粋してみました。

var tmp = $();

// adding a jQuery-wrapped element to the tmp object
tmp = tmp.add( $( buildTemplate() ) );

$('#container').append(tmp);

tmp.imagesLoaded(function() {
    $('#container').isotope('appended', tmp);
});

私にとって重要なのは、画像が読み込まれるのを待つことでした。それ以外の場合、reLayout は何もしませんでした。

于 2012-08-28T19:27:28.107 に答える