2

To explain the situation:

I use both masonry.js and jscroll.js (infinite scrolling) on this particular board.

http://lifeto.cafe24.com/xe/request

and as you can see, the situation is that, the first 20 lists of the board are presented under masonry.js perfectly neat and fine, but it's those lists that are added by the jscroll.js later to the dom that don't work with masonry.js

So, I tried to run masonry.js as a call back function of the jscroll.js so that when I scroll through, the contents are loaded with the masonry.js but unfortunately, it doesn't seem to work.

Here is the complete js script.

/* infinite scroll */
jQuery(document).ready(function() {
    jQuery('.board_content').jscroll({
        loadingHtml: '<div class="loading_div"><center><img src="layouts/wb10/ajax-loader4.gif" alt="Loading" /></center></div>',
        padding: 0,
        contentSelector: '.board_list',
        autoTriggerUntil: 30,
        nextSelector: '.next_button',
        callback: function() {
            var container = document.querySelector('.masonry');
            var msnry = new Masonry(container, {
                columnWidth: 0,
                itemSelector: '.item'
            });
            var $grid = jQuery('.item').imagesLoaded(function() {
                // init Masonry after all images have loaded
                $grid.masonry({
                    // options...
                });
            });
            jQuery('.list_one').waypoint(function() {
                jQuery('.list_one').addClass('animated fadeIn');
            }, {
                offset: '75%'
            });
        }
    });
});
(function($) {
    'use strict';
    $(window).load(function() {
        $('.masonry').masonry({
            columnWidth: '.grid-sizer',
            gutter: '.gutter-sizer',
            itemSelector: '.item'
        });
    });
}(jQuery));

Am I missing something?

Here is the live site: http://lifeto.cafe24.com/xe/request

3
  • 1
    You should use relevant method i guess: $grid.append( $items ).masonry( 'appended', $items ); Check relevant DOC
    – A. Wolff
    Feb 11, 2016 at 12:53
  • @A. wolff could you be a little more specific? im not an expert..
    – Mark Kang
    Feb 11, 2016 at 13:15
  • 2
    You should set a varibale (on global scope?) like: $grid = $('.masonry').masonry({ columnWidth: '.grid-sizer', gutter: '.gutter-sizer', itemSelector: '.item' }); Then when you want to append new elements, use $grid.append( $items ).masonry( 'appended', $items ); where $items are the new added elements. Oh but i see you are already using a variable $.grid but looks like completly unrelevant to mansonry plugin in your code. That's sadi, your code is quite hard to read/follow... See relevant doc masonry.desandro.com/methods.html
    – A. Wolff
    Feb 11, 2016 at 13:22

1 Answer 1

0

Here's a working example of a combination of masonry and jscroll:

$('.infinite-scroll').jscroll({
    autoTrigger: true,
    loadingHtml: '<img class="center-block" src="/imgs/icons/loading.gif" alt="Loading..." />',
    padding: 0,
    nextSelector: '.pagination li.active + li a',
    contentSelector: 'div.infinite-scroll',
    callback: function() {
        /* remove pagination */
        $('.link-pagination').remove();
        /* get blocks from jscroll-added div */
        var $moreBlocks=jQuery('.jscroll-added').find('.item');
        /* do masonry reload with new blocks */
        $('#wall').masonry().append($moreBlocks).masonry('appended',$moreBlocks).masonry('reloadItems');
        /* remove unused div*/
        $('.jscroll-added').remove();
    }
});

It could be better, but it works anyway

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.