Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load More Posts Overlapping in Masonry Layout #1176

Open
abaney opened this issue Sep 24, 2022 · 1 comment
Open

Load More Posts Overlapping in Masonry Layout #1176

abaney opened this issue Sep 24, 2022 · 1 comment

Comments

@abaney
Copy link

abaney commented Sep 24, 2022

I'm using a WordPress plugin called Easy Load More to load more posts for a custom post type.

When the "Load More" button is clicked, the next set of posts (older posts...newest at top) load just fine. However, they cover the top of the initially loaded posts.

In examining the code, it looks like the style attributes (position, left, and top) are not applied to the newly loaded posts (with class .grid-item).

Here is the staging site that's using this code to see this issue in action:
https://sheologiestg.wpengine.com/blog-test/

Any idea why these newly added posts aren't loading correctly? Additionally, below is my Javascript call for the Masonry library.

Code Preview

    <script>

    // jQuery
    // init Masonry
    var $grid = jQuery('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-sizer',
            percentPosition: true,
            gutter: 0,
            horizontalOrder: true,
        });
    });
    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
        $grid.masonry('layout');
    });

    </script>
@abaney
Copy link
Author

abaney commented Sep 27, 2022

I added this script too, but it doesn't seem to lay out the newly loaded items:

//  Vanilla JS
var appendButton = document.querySelector('.elm-button');
appendButton.addEventListener( 'click', function() {
    msnry.appended();
    msnry.layout();
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant