DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Beautiful Masonry Gallery with Bootstrap and Unsplash Random Photos
Simon KΓΆhler
Simon KΓΆhler

Posted on

Beautiful Masonry Gallery with Bootstrap and Unsplash Random Photos

This beautiful gallery combines the Bootstrap framework with Masonry, Animate.css and random photos from Unsplash.

I needed an example for a client, where after each call to the gallery, a certain number of random images are loaded, and also the image sizes are determined randomly.

What could be more obvious than tapping into an image database, I thought. While researching, I came across picsum.photos and their API.

But first, here's the working example:

VIEW PEN IN FULLSCREEN MODE

What happens under the hood?

  1. Load list with images in JSON format
  2. Preload images with ImagesLoaded, then hide preloader
  3. Dynamically generate Bootstrap HTML with JavaScript
  4. Set CSS classes for Animate.css with delay on each image
  5. Put everything in a cool shape with Masonry

Pure Vanilla

No JavaScript library is used for the gallery. Everything is 100% JavaScript. For me personally, jQuery has had its day anyway.

No additional CSS so far...

So far, no additional CSS has been used, except for a few small inline styles to control the animations. Imagine what you can do with this gallery and some extra CSS! You could make it look really cool, and add a lightbox if you want.


Libraries I have used, with great thanks to the respective developers

Bootstrap 5 Framework

https://getbootstrap.com/

ImagesLoaded

https://github.com/desandro/imagesloaded

Masonry

https://masonry.desandro.com/

Animate.css

https://animate.style/

Picsum Photos

https://picsum.photos/


Your feedback is appreciated

If you like this Bootstrap Masonry Gallery PEN, feel free to leave your feedback. Also, I'm always very happy when others can use my work as the basis for great projects.

What would you improve, add, or do differently?


More Stuff

My website

https://simon-koehler.com

Let's connect on GitHub

https://github.com/koehlersimon

MASK.CSS

https://koehlersimon.github.io/maskcss/

Oldest comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›