Infinite Scroll and Masonry – Overlapping Content

Haha, well this figures. As soon as I post the question, I find my error and solution. Instead of deleting this post, I’ll leave it up in case anyone has the same problem (aside from being 4:15pm on a Friday).

I forgot to trigger the layout for the appended excerpts. For more information, check out https://masonry.desandro.com/demos/infinite-scroll.html and https://masonry.desandro.com/docs/methods.html#appended

Hopefully this helps someone else, who has had a long week, haha.

Thanks for the info Ryan, glad you’re finding the plugin useful. I’ll have to update the FAQ area soon with info like this (it seems a few people are using this with Masonry). ??

Hey there,

how did you solve it in the end.
I face a similar problem, after getting infinite scroll to work with masonry.

The loading of the next posts start immediately, when I just scroll 1px down. Not only that the new posts are displayed beneath the old post, the next 2,3,4 pages are being loaded at once and mess up the masonry functionality.

Take a look here

Any suggestions on that?

Thanks
Christoph

Hey guys,

I have the same problem with the overlapping images. Could you guys please let me know how to fix it?

I looked at this page: https://masonry.desandro.com/demos/infinite-scroll.html

And got the following code from the source:

$(function(){

    var $container = $('#container');

    $container.imagesLoaded(function(){
      $container.masonry({
    	itemSelector : '.item',
    	columnWidth : 310,
		isAnimated: true
      });
    });

    $container.infinitescroll(
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true );
        });
      }
    );

  });

I removed the infinite scroll selectors from the code since I assume the plug-in already takes care of that.

I’m pretty new to Javascript, so your help and patience would be greatly appreciated!

Thank you in advance.
– Mahan

@christophzollinger I’m facing the same problem you described. I have seen you already sort it out. Could you please explain what did you do??
Thanks!!

I just sort it out!! I found my asnwer in this other topic. I leave here the reponse…
I was loading the plugin in a bad way. The point is loading the script like appears in masonry docs I have the problem @christophzollinger was talking about.

Load masonry the simple way:

$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.box',
    columnWidth : 258
  });
});

And in the settings page of the plugin…in Javascript to be called… add:

var $newElems = $( newElements ).css({ opacity: 0 });
  $newElems.imagesLoaded(function(){
    $newElems.animate({ opacity: 1 });
    $('#container').masonry( 'appended', $newElems, true );
  });

Just change the selectors.. ??

Woah, this is doing my head in, I seem to have nearly cracked it apart from one oddity.

Two of the posts on the page I’ve put together are repeating on top of themselves, see https://whattoeat.ie/ under the recipe on the 12th of April and 18th of February, 2012 there are recipes from 2011.

I’ve no idea why they’re repeating in that position, any ideas? Anyone ever have this problem?

Thanks!