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

Sign up for my Newsletter!

https://simonkoehler.com/newsletter

PHP Developer

https://simonkoehler.com/php-developer

TYPO3 Freelancer

https://simonkoehler.com/typo3-freelancer