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:
- Load list with images in JSON format
- Preload images with ImagesLoaded, then hide preloader
- Set CSS classes for Animate.css with delay on each image
- Put everything in a cool shape with Masonry
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.
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?