Infinite Scroll and Masonry

  • Resolved jaffa123

    (@jaffa123)


    8 years, 4 months ago

    Hello

    I am building a site using _s theme. I have masonry working but as soon as infinite scroll is activated only the first 7 posts load with masonry. The infinite scrolling is working perfectly fine.

    When troubleshooting with firebug I can see that the div that is required for masonry to work is not present within the <div id=”infinite-view-1″ class=”infinite-wrap infinite-view-1″ data-page-num=”1″ style=””>

    How do I get all the posts to load with the container used for masonry?

    I would really appreciate anyone’s help as I have spent weeks trying to get this to work.

    Thanks in advance.

    https://wordpress.org/plugins/jetpack/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jaffa123

    (@jaffa123)

    8 years, 4 months ago

    Please can someone help me resolve this issue?

    This is the code I am using for masonry:

    <script type=”text/javascript”>
    jQuery(window).load(function() {

    // MASSONRY Without jquery
    var containers = document.querySelector(‘#listing’);
    var msnry = new Masonry( containers, {
    itemSelector: ‘.masonry-entry’,
    columnWidth: ‘.masonry-entry’,
    gutter:29
    });
    });
    </script>

    As mentioned above the first set of posts load perfectly fine but after that it appears that masonry is not being called.

    I have tried numerous example of infinite scroll and masonry but I am unable to get of them working.

    I hope someone can kindly point me in the right direction. I feel like I am almost there but just not quite.

    Thanks

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic 🚀

    8 years, 4 months ago

    I’d suggest looking at this tutorial to get Infinite Scroll to work with Masonry:
    http://wptheming.com/2013/04/jetpack-infinite-scroll-masonry/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Infinite Scroll and Masonry’ is closed to new replies.