Masonry.js, issue with collection sorting order

Design help Custom code
1

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…

06
062880×1444 513 KB

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.

2

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

3

yup, of course! Here it is:

screencapture-madebyhyphae-footnotes-2019-11-11-11_53_39
screencapture-madebyhyphae-footnotes-2019-11-11-11_53_392880×5952 1.61 MB

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

4

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
  });
});
2 Likes
5

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:

screencapture-madebyhyphae-footnotes-2019-11-11-12_35_07
screencapture-madebyhyphae-footnotes-2019-11-11-12_35_072880×6302 1.61 MB

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
6

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
7

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
8

That helped me as well!!
Cheers.

1 Like
9

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)

Screenshot 2021-09-02 at 10.40.01
Screenshot 2021-09-02 at 10.40.011920×1036 203 KB

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

10

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!