WordPressでMasonry＋Infinite scrollを利用する２（手動＆改善）

以前もかいたことがあるのですが、以前の方法では読み込み中のローディング表示にずれが生じていましたので変更しました。
また、自動ではなく手動で読み込むようにしてみました。

functions.php

リンクボタンに特定のクラスを追加

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

function posts_link_attributes() {
  return 'class="navigation btn btn-default btn-lg"';
}

テンプレートのループ内

<div class="row thumbContainer">
        <?php
        while ($search_rooms->have_posts()) {
          $search_rooms->the_post();
          get_template_part('content', get_post_format()); //コンテンツを外部テンプレートに記述しています。直接読み込みたい場合はここに記述して下さい。
        }
        ?>
        <div id="loading" class="loadingBox" style="display: none;"><div class="container"><div class="text-center alert mb0"><i class="fa fa-spinner fa-spin"></i></div></div></div>
        <?php next_posts_link('もっと見る'); ?>
</div>

Javascript

<script type="text/javascript">
    $(function(){
      var $container = $('.thumbContainer');
      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector: '.thumb-item',
          columnWidth: '.thumb-item',
          transitionDuration: "0.2s"
        });
      });
      $container.infinitescroll({
          navSelector  : '.navigation',
          nextSelector : '.navigation',
          itemSelector : '.thumb-item',
          errorCallback: function () {$('#loading').hide(); },
          animate:true,
          extraScrollPx: 100,
          loading: {
            finishedMsg: '<div class="loadingBox"><div class="container"><div class="text-center alert alert-success">すべてを表示しました。</div></div></div> ',
            msgText: '',
            img: ''
          }
        },
        // trigger Masonry as a callback
        function( newElements ) {
          var $newElems = $( newElements ).css({ opacity: 0 });

          $newElems.imagesLoaded(function(){
            $('#loading').hide();
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, true );
            $(".navigation").appendTo(".thumbContainer").delay(1000).fadeIn(600);
            $('.navigation').wrap('<div class="text-center loadingBox">');
          });

        });

      $container.infinitescroll('unbind'); // 初期化
      $(".navigation").click(function(){
        $('#loading').css("display", "block");
        $container.infinitescroll('retrieve');
        return false;
      });
    });
  </script>

参考：【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。
WordPress + jQuery Mobile で Infinite Scroll を使ってみる