masonryがajaxでオートロードした際に2ページ目以降適応されない

Question

masonryをajaxでページングした際に
２ページ目以降(ページ遷移なし)でmasonryが効きない事態に陥ってます。

「もっと見る」ボタンはなくinview.jsを使用して
オートロードするようになってます。

最初にnextTickを使用してみましたが
高さの計算が上手くいかず重なってしまいました。

var deferred = ajaxPagingLoaderReady(options, loaderEl, 'auto', state, self, resultKey);

            deferred.done(function() {
                var units = $('.unit').not('.masonried');
                Vue.nextTick(function() {
                    new Masonry('.unitList', {
                        columnWidth: 360,
                        isFitWidth: true,
                        itemSelector: '.unit',
                        gutter: 20,
                        isAnimatedFromBottom: true
                    });
                    units.each(function() {
                        $(this).addClass('masonried');
                    });
                });
            }).fail(function() {
                console.log('fail');
            });

その後、setIntervalを使用したコードに書き換えてみました。
最初の読み込みでは問題なく動いてるのですが
2回目の読み込みからmasonryが適応されません。

            var deferred = ajaxPagingLoaderReady(options, loaderEl, 'auto', state, self, resultKey);

            deferred.done(function() {
                var units = $('.unit').not('.masonried');
                var renderMasonry = function() {
                    new Masonry('.unitList', {
                        columnWidth: 360,
                        isFitWidth: true,
                        itemSelector: '.unit',
                        gutter: 20,
                        isAnimatedFromBottom: true
                    });
                    units.each(function() {
                        $(this).addClass('masonried');
                    });
                };

                var interval = setInterval(function() {
                    console.log($('.unitList').height());
                    if ($('.unitList').height() > 0) {
                        renderMasonry();
                        clearInterval(interval);
                    }
                }, 200);
            }).fail(function() {
                console.log('fail');
            });

検索をしてみたところ
imagesLoadedを使うといいと見たので試してみました。

var deferred = ajaxPagingLoaderReady(options, loaderEl, 'auto', state, self, resultKey);

            deferred.done(function() {
                var units = $('.unit').not('.masonried');
                imagesLoaded('.unitList',function() {
                    new Masonry('.unitList', {
                        columnWidth: 360,
                        isFitWidth: true,
                        itemSelector: '.unit',
                        gutter: 20,
                        isAnimatedFromBottom: true
                    });
                    units.each(function() {
                        $(this).addClass('masonried');
                    });
                });
            }).fail(function() {
                console.log('fail');
            });

最初と同じく重なってしまう状況になってます。

ご教示いただけますと幸いです。

【追記】
imgタグにwidth, heightを指定する解決方法もありましたが
JSONから取得しており幅高さは統一されておりません。

Answer 1

ロード時にmasonryを一度実行します。
その後、ajax成功時（DOM更新時）にはreloadItemsを実行するだけで良いと思います。
masonriedクラスの付与も不要です。

公式ドキュメント
http://masonry.desandro.com/methods.html#reloaditems

var deferred = ajaxPagingLoaderReady(options, loaderEl, 'auto', state, self, resultKey);
var masonry;

deferred.done(function() {
  var renderMasonry = function() {
    masonry = new Masonry('.unitList', {
      columnWidth: 360,
      isFitWidth: true,
      itemSelector: '.unit',
      gutter: 20,
      isAnimatedFromBottom: true
    });
  };

  renderMasonry();
}).fail(function() {
  console.log('fail');
});

Comments

[退会済みユーザー]

ご回答ありがとうございます！

教えていただいたコードを試したところ
ローダーがぐるぐる回ったままになり
masonryが実行されるまでに至っていないようでした。
（エラーは出ておらず。）

コードを元に改変などしてみたのですが
なかなか動かず...。

また何かお気づきの点がありましたら
ご回答いただけますと幸いです！

[yamato_hikawa]

回答のコードを修正しました。
こちらだといかがでしょうか？

Answer 2

もう解決済みでしょうか？
私も同じ問題にあたり、以下の手順で解決しました。
jqueryでの実装ですので、コードが違いますが参考までに。

$.ajax({
  dataType: 'html',
  url: 'example.php'
})
.done(function(data) {
  $('#target').append(data);
  var $grid = $('#target').imagesLoaded( function() {
    $grid.masonry('appended', $(data));
    $grid.masonry('reloadItems');
    $grid.masonry('layout');
  });
});

Answer 3

appended というメソッドがあるようですね。

Adds and lays out newly appended item elements to the end of the layout.

Masonry · Methods

Comments

[退会済みユーザー]

ご回答ありがとうございます！
appendedを調べながら少し試してみました。

2ページがオートロードされるタイミングで
appendedしてあげるのは想像できるのですが
なかなか実現できず...。

もし宜しければ
もう少し詳しいコードを教えていただけますと幸いです！