Forums

Infinite-Scroll
[resolved] Infinite Scroll and Masonry - Overlapping Content (4 posts)

  1. Ryan
    Member
    Posted 5 months ago #

    Hello,

    First and foremost, thank you for such a great plugin! It has saved me a considerable amount of time when working on a few projects.

    Anyways, I currently have Infinite Scroll installed with a theme that I am creating. I also have jQuery Masonry installed. The overall structure of my current theme can be simplified and broken down as follows:

    <div id="header">
    Header content
    </div> <!-- #header !-->
    
    <div id="content">
      <div id="excerpts">
        // This is where my loop starts, and pulls excerpts as follows
          <div class="exerpt fleft"> //Where fleft is float:left
            Excerpt here
          </div>
          <div class="exerpt fleft"> //Where fleft is float:left
            Excerpt here
          </div>
          <div class="exerpt fleft"> //Where fleft is float:left
            Excerpt here
          </div>
          // Excerpts continue down with infinite scroll
    
         <div class="navigation"> Nav Links Here </div>
      </div><!-- #excerpts !-->
    </div> <!-- #content !-->
    
    <div id="footer">
    Footer content here
    </div>

    Again, this is simplified but it should illustrate my problem.

    Currently, I have the Infinite Scroll and the Masonry working. However, when new excerpts are appended to the container, some of them tend to go beneath (occupying the same spot) the existing excerpts instead of below them.

    Do you have any ideas what could be causing this? I don't want to share a link publicly, as it is a development site, but if you need more info or a link to the site please feel free to shoot me an email. ryan at metacomdesign dot com

    Again, thanks so much for the plugin!

    http://wordpress.org/extend/plugins/infinite-scroll/

  2. Ryan
    Member
    Posted 5 months ago #

    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 http://masonry.desandro.com/demos/infinite-scroll.html and http://masonry.desandro.com/docs/methods.html#appended

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

  3. beaver6813
    Member
    Posted 5 months ago #

    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). :)

  4. ChristophZollinger
    Member
    Posted 3 months ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic