desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.41k stars 2.11k forks source link

Multiple scroll with masonry #1107

Open bilalmalkoc opened 5 years ago

bilalmalkoc commented 5 years ago
const check = $('.neon-post-list');

check.each(function (i, j) {
    $(this).find('.neon-masonry').addClass('neon-masonry-' + i);
    $(this).find('.masonry-sizer').addClass('masonry-sizer-' + i);
    $(this).find('.masonry-style').addClass('masonry-style-' + i);
    $(this).find('.page-load-status').addClass('page-load-status-' + i);
    $(this).find('.neon-load-mores').addClass('neon-load-mores-' + i);
    $(this).find('.pagination-object').addClass('pagination-object-' + i);

    let button = $('.neon-load-mores-' + i),
        pObj = $('.pagination-object-' + i);

    // Masonry + Load More
    if (check.hasClass('masonry-style') && pObj.data('pag') === 'load_more') {
        let $grid = $('.neon-masonry-' + i).masonry({
            itemSelector: 'none',
            columnWidth: '.masonry-sizer-' + i,
            visibleStyle: {transform: 'translateY(0)', opacity: 1},
            hiddenStyle: {transform: 'translateY(100px)', opacity: 0},
        });

        let msnry = $grid.data('masonry');

        $grid.imagesLoaded(function () {
            $grid.removeClass('are-images-unloaded');
            $grid.masonry('option', {itemSelector: '.masonry-style'});
            let $items = $grid.find('.masonry-style-' + i);
            $grid.masonry('appended', $items);
        });

        $grid.infiniteScroll({
            path: function () {
                let pageNumber = (this.loadCount + 1);
                if (this.loadCount < pObj.data('max')) {
                    return pObj.data('home') + pObj.data('get') + '=' + parseInt(pageNumber + 1);
                }
            },
            append: '.grid-style',
            outlayer: msnry,
            status: '.page-load-status-' + i,
            history: false,
            button: '.neon-load-mores-' + i,
            scrollThreshold: false,
        });

        $grid.on('request.infiniteScroll', function (event, path) {
            button.hide();
        });

        $grid.on('load.infiniteScroll', function (event, path) {
            setTimeout(function () {
                button.show();
            }, 200);
        });

        $grid.on('error.infiniteScroll', function (event, path) {
            button.remove();
        });

        $grid.on('last.infiniteScroll', function (event, path) {
            button.remove();
        });

        $(document).on('lazyloaded', function (e) {
            msnry.layout();
        });
    }
});

When append first scroll, it works good. But when append second after first, it not loads correctly.