infinite scrollとMasonryの統合が上手くいかない

前提・実現したいこと

Tumblrにてポートフォリオサイトを制作したく、Masonry（グリッド）とinfinite scroll（無限スクロール）を統合させたいと考えています。

発生している問題・エラーメッセージ

以前の質問によりinfinite scrollの実装、また、公式サイトを調べMasonryの実装にも成功したのですが、無限スクロールの読み込み以降にMasonryのグリッドが効いておらずそのまま縦に並んでしまった状態です。

該当のソースコード

Tumblrなので本来は独自タグを使用しますが、分かりやすくするため外しておきました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <script src="https://static.tumblr.com/wpbpbhk/FRFqk2fty/jquery-3.5.1.min.js"></script>
8  <script src="https://static.tumblr.com/wpbpbhk/Sqgqk1h56/infinite-scroll.pkgd.min.js"></script>
9  <script src="https://static.tumblr.com/wpbpbhk/6IOqk4nbp/masonry.pkgd.min.js"></script>
10  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
11  <script>
12    $(function(){
13	$('#wrapper').infiniteScroll({
14        path : ".navigation a",
15		append : "#wrapper"
16	});
17});
18 </script>
19<script>
20//特にわからない箇所（公式サイトのものをほぼコピペしたものです）
21    // with Masonry & jQuery
22// init Masonry
23var $grid = $('#container').masonry({
24  // Masonry options...
25  itemSelector: '.item', 
26});
27
28// get Masonry instance
29var msnry = $grid.data('masonry');
30
31// init Infinite Scroll
32$grid.infiniteScroll({
33  // Infinite Scroll options...
34  append: '#wrapper',
35  outlayer: msnry,
36});
37//ここまで
38</script>
39 <script>
40jQuery(function($){  
41  $('#container').masonry({
42    itemSelector: '.item',
43    columnWidth: 10, 
44    isFitWidth: true
45  });  
46});
47 </script>
48<body>
49<div id="wrapper">
50<div id="container">
51	<div class="item">
52            <div class="entry-content">
53              
54              <a href="（リンク）">
55                <img src="image.png" alt="" class="img-responsive"/></a>
56                <div class="caption">
57                </div>
58            </div>
59
60     <!--繰り返し-->
61
62          
63    </div>
64</div>
65
66	<p class="navigation"><a href="（リンク）"></a></p>
67	</div>
68</body>
69</html>

試したこと

以下のinfinite scrollの公式サイトにて、Mansoryとの統合について記載されていましたので参考にしてみたのですが、どこに何を書けばいいのか分からずほぼ勘で埋めてしまいました。

https://infinite-scroll.com/options.html

追記
script内を以下のように変更してみましたが、画像のように追加されたページが縦列（ここは変わらずです）のまま、1ページ目の下に潜り込んでしまいました。

 jQuery.event.add(window,"load",function(){
  var $container = $('#container');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.item',　
        isFitWidth: true,
        columnWidth: 50
      });
      $container.infiniteScroll({
          path:".navigation a",
          append:".item"
      });
    });
});

赤（透過）→１ページ目
黄色→２ページ目

また、infinite scroll公式サイトを参考に

script
1 jQuery.event.add(window,"load",function(){
2  var $container = $('#container');
3    $container.imagesLoaded(function(){
4      $container.masonry({
5        itemSelector: '.item',　
6        isFitWidth: true,
7        columnWidth: 50
8      });
9
10//追加箇所1
11var msnry = $container.data('masonry');
12//追加箇所1
13
14$container.infiniteScroll({
15  path:".navigation a",
16  append: '.item',
17//追加箇所2
18  outlayer: msnry,
19//追加箇所2
20});

としてみましたが、Masonryとinfinite scroll、どちらも動かなくなってしまいました。

行動規範の内容に同意します

回答1件

自己解決

sprict
1jQuery.event.add(window,"load",function(){
2  var $container = $('#container');
3    $container.imagesLoaded(function(){
4      $container.masonry({
5        itemSelector: '.item',　
6        isFitWidth: true,
7        columnWidth: 50
8      });
9
10var msnry = $container.data('masonry');
11
12$container.infiniteScroll({
13  path:".navigation a",
14  append: '.item',
15  outlayer: msnry,
16});
17});
18});