[Beginner Tutorial] Masonry Layout using masonry.js

@Marci, I have been using this JS for a while now with great results but it seems to have broken with the update to JQuery 3.3.1 that webflow put out recently. The images show but not in the masonry format. Do you have any suggestions on how to fix or workaround this?

@Marci, as a workaround I called an older version of JQuery in the custom code section of the settings.

Here is the site I am using it on (click on Projects and then an individual project to see the grid). As you can see it works now with the workaround but if you take that JQuery 2.2.0 ref out the masonry layout breaks.

https://preview.webflow.com/preview/plusen?preview=b885a89f8d93abcd1ed3e0985c768b4b

Thank’s for the heads up, will look into this and fix the sample page :slight_smile:

@GoldenRatio Someone helped me simplifying the custom code, so it’s working again. Check the updated code-snippet in the How-To section and you can finally get rid of your jquery 2.20 fallback :slight_smile:

Not sure it’s working fully? Some of the images are overlapping near the top.

CloudApp

Hey Mark, i tested on Chrome on Win 10. Did you try other masonry.js demos from the official website? Looks like the slide-in-from-bottom animation get’s messed up.

Due to the async loading behaviour I had to improve the custom code (again).

May you try again if you still see the “overlapping” issue? TY :slight_smile:

I am looking to create a layout on webflow similar to this: Layout

I would like to have the vertical tile instead of horizontal.

If someone can help me with the code it would be appreciated!

Hey Mark, the width of each element is predictable (think in percentage % of the container width).

In your example it’s a (simple) 12 column layout, the first row is 8/4, the second 4/4/4. If you want this in your CMS Collection you probably need to define all these sizes and then activate the correct width per item. There’s definitely no need for masonry.js in this case.

You could just use isomorph?

@Marci Thank you so much for your detailed tutorial. It’s very easy to follow and I can successfully apply the Masonry Layout in my site. Thank You!!!

But one annoying thing is, I’ve noticed the masonry layout is a bit buggy when people open my site at their first time. Please have a try: http://twoinone.webflow.io/ The projects will collapse together and looks awful. But when you refresh the website, the problem will be gone. It will only happen again when you cleared the browser cache.

I would appreciate it if you could help have a look into my project. I don’t see this problem on your example site. It must be something wrong with my site. The read-only link to my project is: Webflow - Twoinone Studio

Thank you so much!

Hi @Marci

Thanks for this tool!

Unfortunately Im getting this error
image

Any advice?

Thanks in advance!

@Adam_Keresztes

You are calling the jquery function before the jQuery JavaScript is included.
Solution: Put the code before body (Not before head) = After Jquery is loaded. To get specific answer add live URL.

https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined

Thanks for you help @Siton_Systems - That was clumsy of me!

Now it works great! Is there a way I can have same effect as the website that thumbnails transition upwards?

Thanks a lot to @Marci for sharing this with everyone, soooo good!

I’ve implemented it 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.

In case it can be helpful to others, I’ve found a solution for my buggy sorting order: see reply marked as “solution” on this thread Masonry.js, issue with collection sorting order - #4 by Davidlin_ch12

That’s super helpful!!

Cheers
Grant

Hi @Marci - thanks so much for this! Have you created any code for this to work with tabs? I have researched and tried my hand with a couple of things but I am not a coder and am not finding success.
Read-only link.
Live page: http://geoffreedphoto.webflow.io/portfolio-test

Thank you again!

1 Like

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 :slight_smile: