Flickr-like Image Matrix Display Module in Vanilla JavaScript

Photo grid box is a vanilla JavaScript library for displaying images in a responsive justified grid layout as you’ve seen on Flickr and Google Image Search.

responsive image grid codepen, image grid css, javascript image gallery with thumbnails, image gallery html css, css image gallery with thumbnails

How to make use of it:

1. Install and import iPhoto-Network-Box-Vanilla.

$ npm i photo-grid-box-vanilla
import { PhotoGridBox } from 'photo-grid-box-vanilla';

2. Or load the photo-grid-box-vanilla.min.css and JavaScript photo-grid-box-vanilla.min.js stylesheet into an HTML document.

<link rel="stylesheet" href="css/photo-grid-box-vanilla.min.css" />
<script src="photo-grid-box-vanilla.min.js"></script>

3. Create a container to hold the photo grid.

<div id="container"></div>

4. Create a group of photos to be present in the photo grid.

const imgs = [
        src: '1.jpg',
        payload: {
          title: 'Image 1' 
        src: '2.jpg',
        payload: {
          title: 'Image 2' 
     // more images

5. Configure the photo grid.

const element = document.querySelector('#container');
const photoGrid = new PhotoGridBox(element, imgs);

6. Available parameters:

new PhotoGridBox(insertPoint, imgs, imgOnClick, panelHTMLSetter, rowGap, colGap);

7. More API methods.

// append more images to the photo grid
// update the onClick event handler
photoGrid.setImgOnClick(function (e, imgConfig) {
  // do something
// update the panelHTMLSetter callback
photoGrid.setPanelHTMLSetter(function (imgConfig) {
  var htmlString = ''
  if (imgConfig && imgConfig.payload && imgConfig.payload.title) {  // use the parameter to reference the payload and create customized panel for each block
    htmlString += '<div class="photo-block__panel__title">'+ imgConfig.payload.title +'</div>'
  return htmlString
// By default, the PhotoGridBox will hide the last row if the last row is not complete; to make it looks more natural when loading pictures chunk by chunk. When there is no more picture to load, or for any reason, you can use the method to cancel the feature.
// destroy the photo grid

Flickr-like Photo Grid In Vanilla JavaScript, photo-grid-box-vanilla Plugin/Github

See Demo And Download

Official Website(tabsteveyang): Click Here

This superior jQuery/javascript plugin is developed by tabsteveyang. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…