How to use lazy load with masonry

Hello, this is fantastic !

Am new to this site and don’t know what it’s all about. How to implement the code on my site ?

1 Like

@Teodor thanks for your reply. I understood your example. Am looking for exactly that. Dynamic data being loaded on my site using Grid Masonry from this Codepen and a JS for lazy load. The layout is broken each time I use the Lazy load JS but without the lazy load it will work correctly. Google brought me on this page.

My site is running Joomla with k2 components (not sure if you are familiar with that). I added the codes from codepen manually and used a free Joomla plugin called ‘Defer Image’.

That’s said am not sure where to get started.

Here’s the result am getting : Dev version of my Website
P.S Extra padding is added at bottom and heights become equal with my Lazy Load plugin.

What your Joomla site or the codepen link has to do with Wappler and it’s components exactly?

I have installed the Wappler on windows but am not sure how to get started.

Basically I was looking for examples of your layout (HTML + JS + CSS) like it would showup on codepen and then replicated the same on my website.

You are asking a question which is too broad. If you want to build a website with Wappler check the docs and Wappler Getting Started Course

Hi and thanks,

sorry for that, I think am just on the wrong place. Like I said I just wanted to replicate your code on my existing website.