Masonry.js, issue with collection sorting order

I’ve implemented Masonry.js successfully on a CMS collection of txt based elements, however I’m having a bit of trouble with the sorting. I’ve assigned a sorting rule through Webflow’s Designer “number: smallest to largest”. The rule seems to work for the first three elements, but then breaks putting number 5 and 6 before number 4 and so on…

Does anyone have any ideas on what I might be doing wrong? :thinking:

Read-only link
Live link, pw: Sustain4b1l1ty!

PS. I’ve got tha Masonry.js script pasted in “Project settings>Custom code” rather than at page level.

Can we see a screenshot of it breaking and the numerical settings?

yup, of course! Here it is:

I’ve tested in Chrome and Safari on my Macbook. Obv, no issue on mobile as the masonry layout is not triggered, with the elements stacking in the correct order

Hey Chiara,

Maybe adding horizontalOrder: true inside of your masonry custom code would fix it?

So like this:

$(window).on("load", function() {
    itemSelector: '.masonry-item',
    horizontalOrder: true

Hello @Davidlin_ch12 thank you for chipping is. I think you’re onto something there: the additional fixes the sorting by numbers (1 to 9) but it seems to “undo” the masonry effect, turning the list into a standard grid:

My JS knowledge is super basic, so I’m not too sure how to progress this, any help would be super appreciated :slight_smile:

1 Like

Looking at your live page, I see you have added ; after horizontalOrder. There should be nothing, when it is the last line because it is in JSON format. You should only add ; after Javascript. :grinning:

Edit: also add a , after '.masonry-item'. Like the example in my last reply

1 Like

Opssss :sweat_smile: bad syntax queen over here

YES! adding horizontalOrder: true does the trick, thank you sooooo much for your help with this :raised_hands:


That helped me as well!!

1 Like

Hi, I’m using this code on a website, I’m facing a problem with loading the code, randomly the elements of the gallery overlap (screenshot attached)

This problem is mainly present in Firefox and Chrome, in Safari for example it does not seem to be present at all,
can anyone help with this?

here is the link of the page I’m trying to fix:

many thanks

Hi everyone. Could I please get some help with my project as well?

It is my first website. I started trying to build the masonry with text columns and realized the issue of not being able to have it horizontal.

With the help of this project (smoothly-masonry-layout-with-masonryjs-from-david-desandro - Webflow) , I managed to correct the order.

But then it lost the masonry effect for some reason.

Here is my read only link: Webflow - Shame Studios | Bespoke Rugs

Thank you!