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 
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
});
});
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
I think I found a better solution than masonry.js – Colcade. Developed by the same author from Masonry.
Colcade is easy to implement, faster, and does not require imagesLoaded.
ok…i think i found a solution — trigger the masonry layout once more, after the images are loaded.
try this:
<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
});
// Lays out all elements AGAIN
$masonry.masonry('layout');
});
</script>
I can’t reply more than 3 times – so disregard this recommendation. Our sites now execute masonry grid with the Colcade library.
ok, circling back on this →
-
Make sure to set your collection list “layout” option to full width
-
Set your collection list to flex with the below settings:
-
Give your collection list item a width of 100/3%:
If this doesn’t work, then I’d suggest use a new javascript masonry grid.
this all looks great but I can’t seem to get it to work. followed first set of instructions to the t but still just generic tile of images. no change after implementation. then I saw it was several years old and started reading comments. I guess colcade is better but I know nothing of scripting. Can anyone provide step by step instructions? is it literally a question of copying and pasting entire colcade.js text into Before /body tag ?
- Just add the Colcade script before the
</body>tag of your site from the “Custom Code” section. Image below shows where to add the script.
- Then just set up your Webflow site as shown in the Colcade HTML INIT example page (there are also (3) other ways to implement, but I find adding HTML attributes as the easiest implementation).
HTML Init setup in Webflow
Initializing Colcade through attributes
