Home>

I want to create a portfolio site on Tumblr and want to integrate Masonry (grid) and infinite scroll (infinite scroll).

According to the previous question, I implemented infinite scroll and succeeded in implementing Masonry by checking the official website, but after loading infinite scroll, Masonry's grid did not work and it was lined up vertically as it is.

Corresponding source code

Since it is Tumblr, I originally use my own tag, but I removed it for the sake of clarity.

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>Document</title>
<script src = "https://static.tumblr.com/wpbpbhk/FRFqk2fty/jquery-3.5.1.min.js"></script>
<script src = "https://static.tumblr.com/wpbpbhk/Sqgqk1h56/infinite-scroll.pkgd.min.js"></script>
<script src = "https://static.tumblr.com/wpbpbhk/6IOqk4nbp/masonry.pkgd.min.js"></script>
<script src = "https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>
<script>
    $(function () {
    $('#wrapper'). infiniteScroll ({
        path: ".navigation a",
        append: "#wrapper"
    });
});
</script>
<script>
// Parts I don't understand (almost copied and pasted from the official website)
    // with Masonry&jQuery
// init Masonry
var $grid = $('#container'). masonry ({
  // Masonry options ...
  itemSelector:'.item',
});
// get Masonry instance
var msnry = $grid.data ('masonry');
// init Infinite Scroll
$grid.infiniteScroll ({{
  // Infinite Scroll options ...
  append:'#wrapper',
  outlayer: msnry,
});
//So far
</script>
<script>
jQuery (function ($) {
  $('#container'). masonry ({
    itemSelector:'.item',
    columnWidth: 10,
    isFitWidth: true
  });
});
</script>
<body>


    
            
              
                 
                
                
            
   <!-Repeat->

    

   
    
</body>
</html>
What I tried

The following infinite scroll official website described the integration with Mansory, so I tried to refer to it, but I didn't know where to write what, so I almost filled it in.

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

Postscript
I tried to change the inside of the script as follows, but the added page like the image sneaked under the first page with the column (this is the same).

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"
      });
    });
});

Red (transparent) → 1st page
Yellow → 2nd page

Also,infinite scroll official websiteWith reference to

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


I tried, but both Masonry and infinite scroll stopped working.

  • Answer # 1

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

    I solved it here.
    I just missed two});at the bottom.