Masonry layout from CMS images

In last week I have worked on masonry layout using API calls and custom JS. There are another options as to use JS libraries to achieve Masonry layout but I was just experimenting.

So I was thinking if I can implement this layout on Webflow from images in CMS as easy as with custom code from scratch. And I had a hard time ( I’m not as fluent with WF yet) but make it work.

Main approach was to take original height of image use JS Math() to get usable number and dynamically inject calculated value as number for span of grid-row-end. With vanilla JS it is approx 15 lines of code (without API call).

When I have start implementing code into Webflow I have found one problem I had to solve firs. As I wrote the main approach was to get an *original image naturalHeight, right. But all went south and spans numbers were wrong and also changing its values on browser resize.

After checking in console what is going on I have found that Webflow changing image sizes, that’s good thing as always serving optimal image size from srcset, but was not I need. So I have to find way how to get static number of original image size.

Solution is not optimal for big projects (not most efficient code approach) but it can be used eg. on portfolio sites. If someone will get an idea how to improve this code I’m open to talk. :slight_smile:

All CSS styles and JS is in Embed CUSTOM CSS & JS (56 lines)


Have a good one