Streaming live at 10am (PST)

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() {
	$('.masonry').masonry({
    itemSelector: '.masonry-item',
    horizontalOrder: true
  });
});
1 Like

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:

2 Likes