Combine masonry layout and virtualized in ReactJS

Tram Ho

Introduce

  • Layout masonry is a column-based grid layout, unlike a grid, it has no fixed height. Overall, masonry layout will optimize the space used in a web page by minimizing all the gaps between elements. The simplest and most intuitive example is https://www.pinterest.com/ the space between the images is just the section between the images, no extra space
  • What virtualized is, in my series of articles, there are quite a few related articles, you can check again.
  • A long time ago, after entering the pinterest page, I wanted to be able to create such a layout, if you pay attention, then pinterest just uses this masonry layout, both using virtualized method, and using method load more, as well as algorithms to optimize images to speed up loading. But today I only focus on the first two, layout masonry and combine it with virtualized. So today I will use 1 library called masonic to support this work better.

For example

For quick, this time we use create-react-app to operate offline: create-react-app masonry_layout I install the masonic library too: npm i masonic

In the App.js file, I create a list of images with 5000 images:

Next is the Masonry component:

Here is the complete App.js file:

Next is the ImageCard components used to render each cell of the layout masonry: the ImageCard.js file

Finally, I have added some css to make the layout easier to see in the App.css file:

And this is the result:

If you inspect the element, you already have the layout masonry along with the virtualized method

Conclude

So I have created for me 1 UI layout like pinterest already, please try it, wish you success (yaoming)

Share the news now

Source : Viblo