desandro / masonry

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

Massonary grid issues on ajax loading #1068

Closed amitsarkerr closed 5 years ago

amitsarkerr commented 5 years ago

Hello,

I am using your scripts on my wordpress theme for post massonary layout http://prntscr.com/l14jh7. When I click load more button, it's overlapping on the grids http://prntscr.com/l14kbl

My js codes `$("#load-more-posts").on('click', function (e) { var nexturl = $(this).attr('href');

        $.get(nexturl, {}, function (data) {
            var posts = $(data).find(".lorepostsgrids").html();
            //console.log(posts);
            $(".lorepostsgrids").append(posts);

            var postgrids = $('.lorepostsgrids');
            imagesLoaded($postgrids,function(){
                $postgrids.masonry('appended',items);
                $postgrids.masonry({
                    itemSelector: '.grid-item'
                });

            });

            var newpagelink = $(data).find("#load-more-posts").attr("href");
            if(newpagelink){
                $("#load-more-posts").attr('href', newpagelink);
            }
            else{
                $("#load-more-posts").hide('slow');
            }
        });
        return false;
    });

    var newpagelink = $("#load-more-posts").attr("href");
    if(!newpagelink){
        $("#load-more-posts").hide('slow');
    }`

Solution please

desandro commented 5 years ago

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

amitsarkerr commented 5 years ago

Finally, I fixed it