How to Display Images Using the Masonry Effect in an Angular App

Lay out images like Pinterest and Flickr in an Angular App

John Au-Yeung
Level Up Coding
Published in
7 min readDec 29, 2019

--

If you use image search websites like Pinterest or Flickr, you will notice that their images display in a grid that looks like a wall of bricks. The images are uneven in height but equal in width. This is called the masonry effect because it looks like a wall of bricks.

To implement the masonry effect, we have to set the width of the image proportional to the screen width and set the image height to be proportional to the aspect ratio of the image.

This is a pain to do if it’s done without any libraries, so people have made package to create this effect.

In this article, we will build a photo app that allows users to search for images and display images in a masonry grid. The image grid will have infinite scroll to get more images. We will build it with Angular and the Masonry-Layout and Ng-Masonry-Grid library. We will wrap the Ngx-Infinite-Scroll component outside the Ng-Masonry-Grid to get infinite scrolling with the masonry effect when displaying images.

Our app will display images from the Pixabay API. You can view the API documentation and register for a key at https://pixabay.com/api/docs/

--

--