Masonry.js, issue with collection sorting order

[Chiaradesignsthings (Chiara Mensa)]

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?

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.

[alexvale]

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

[Chiaradesignsthings (Chiara Mensa)]

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

[Davidlin_ch12 (David Xin Long Lin)]

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
  });
});

[Chiaradesignsthings (Chiara Mensa)]

@Davidlin_ch12

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

[Davidlin_ch12 (David Xin Long Lin)]

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.

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

[Chiaradesignsthings (Chiara Mensa)]

Opssss bad syntax queen over here

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

[grantsenior]

@Davidlin_ch12

horizontalOrder: true

That helped me as well!!
Cheers.

[Giutog (Giulia Tognocchi)]

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:
https://unica-a51bae.webflow.io/architecture-category/all

many thanks

[Nathalia_Gregores (Nathália Gregores)]

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 (https://webflow.com/website/Smoothly-Masonry-Layout-with-Masonryjs-from-David-DeSandro?s=masonry-js-smoothly) , I managed to correct the order.

But then it lost the masonry effect for some reason.

Here is my read only link: https://preview.webflow.com/preview/shamestudios?utm_medium=preview_link&utm_source=designer&utm_content=shamestudios&preview=354f222b1a782953fcebd19846c3d21a&pageId=617975df4df7bb61629ba9a5&workflow=preview

Thank you!