CODEWITHSUNDEEP
wordpressjquery-masonrymasonry
playedandmissed
playedandmissed

Reputation: 35

Masonry layout blocks overlapping, works on refresh

In WordPress I have posts being arranged by masonry, which work perfectly 60% of the time.

The rest of the time they overlap each other, as if masonry has worked out the layout before the posts' featured images and excerpts have finished loading, resulting in the overlaps.

Refreshing the page fixes every time. Has anybody else come across this or know whats going wrong?

Masonry is being loaded by WordPress, and the following in my script.js file:

    var $container = $('#latestposts');
            $container.masonry({
        itemSelector: '.masonryitem',
        isAnimated: true
    });

Thanks!

Upvotes: 1

Views: 2873

Answers (2)

Dharmik
Dharmik

Reputation: 239

There is a tweak to fix it on chrome and safari browser.

Add this line:

jQuery("img").load(function() { jQuery(".container_class").masonry(); });

Upvotes: 1

shmuli
shmuli

Reputation: 5192

This is a common issue that people will experience while working with Masonry/Isotope, and it's addressed here in the FAQ: http://masonry.desandro.com/faq.html.

To fix it, call the layout method at the end of your code block and that will refresh the layout once the elements have already finished loading, resulting with no overlap.

Here's the convention from the Masonry documentation: http://masonry.desandro.com/methods.html#layout

Alternatively, you can also fix this by ensuring that all the elements are already loaded before instantiating the Masonry plugin.

If this only causes overlap in images, another way to correct this is by using the imagesLoaded() method once the images have already been loaded. This will trigger Masonry and cause the plugin to refresh the layout. Just keep in mind, that if you're going to use this approach you actually have to add the imagesLoaded script (https://github.com/desandro/imagesloaded) into your project before calling the method. See this page in the documentation for more information on this: http://masonry.desandro.com/appendix.html#imagesloaded

In addition, you may find some of the advice in this post useful: I want to use Masonry in wordpress but it seems not working

Upvotes: 2

Related Questions