Streaming live at 10am (PST)

[Beginner Tutorial] Masonry Layout using masonry.js

Note: I had to restore a backup earlier today, so some of the classes may have temporarily been removed, but should be up to date now.

Hey!

I appreciate hat this was an old post - but did you have any luck with this? Trying to do the exact thing

Cheers,
Connor.

Hi Marci,
I’m experiencing the same problem as Mark: the collection items are sometimes overlapping. here is a screen and link:

link to my website page:
https://unica-a51bae.webflow.io/architecture-category/all

you said you have improved the custom code, where can I find it exactly? did you manage to solve the issue?
sorry I’m new here

thanks for your help :slight_smile:

I was having this same issue. I had to use the imagesLoaded method instead of the $(window).on("load",....
This below linked article was helpful to solve the overlapping issue
Link to article by author of Masonry.js

Bottom line , you need to add the additional imagesloaded CDN package and adjust your jquery to:

//minified masonry.js package
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
//add the imagesloaded package 
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

var $masonry = $('.masonry').imagesLoaded( function() {
    // init Masonry after all images have loaded
    $masonry.masonry({
        itemSelector: '.masonry-item',
        horizontalOrder: true
    });
});

Hi @whitakereditions

many thanks for your answer.
I tried to add to the page settings your code, but unfortunately I’m still having the same problem.

this is the code I added on the page settings:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
var $masonry = $('.masonry').imagesLoaded( function() {
    // init Masonry after all images have loaded
    $masonry.masonry({
        itemSelector: '.masonry-item',
        horizontalOrder: true
    });
});
</script>

here is a link to the page:
https://unica-a51bae.webflow.io/architecture-category/all

It still doesn’t not always shows the overlapping, but with a couple of refresh you can see it
thanks again for your help :slight_smile:

I see what you mean – :thinking: I’m not sure what the fix is. It could be a number of issues. This may take a while to circle back to.