jquery - JQuery Masonry に追加されたアイテムを認識させるにはどうすればよいですか?

Question

これはこれと同じ質問ですが、ここに JSFiddle に関する問題の再現があります。ということで、再投稿しようと思いました。

JQuery Masonry は、最初の実行時にコンテナーの子を 1 回だけ評価するようです。その後、DOM を再度調べて、その子を再評価させることはできません。

Answer 1

Masonry の追加メソッドに新しいコンテンツを渡す必要があります。

$("#container").append(content).masonry("appended", content);

ここであなたのフィドルを更新しました。

Answer 2

私はreload方法を利用しました：

.masonry( 'reload' )

reloadの石工ドキュメントは次のとおりです。

「reloadItems をトリガーしてから .masonry() をトリガーするための便利なメソッド。アイテムの先頭または挿入に役立ちます。」

Answer 3

jQuery を使用している場合、これですべての問題が解決されます。

次のようなものを使用して、html/php ページに Masonry を含めています。

<script src="js/masonry.min.js"></script>
<script>
    $('#ms-container').masonry({
        columnWidth: '.ms-item',
        itemSelector: '.ms-item'
    });
</script>

代わりに、次のようにしておきます。

<script src="js/masonry.min.js"></script>
<script src="js/masonry-init.js"></script>

そしてjs/masonry-init.js、次のファイルを作成します。

$('#ms-container').masonry({
    columnWidth: '.ms-item',
    itemSelector: '.ms-item'
});
var masonryUpdate = function() {
    setTimeout(function() {
        $('#ms-container').masonry();
    }, 500);
}
$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

もう心配する必要はありません。