jQuery Plugin For Responsive Justified Image Gallery - Justified

Justified is a small and simple-to-use jQuery plugin for generating a responsive justified gallery / grid to present your images with various sizes and aspect ratios.

How to use it:

1. Insert a group of images (or any element else you prefer) into a DIV container with the CSS class of 'grid-container'.

<div id="grid-container">
  <img class="grid-item" src="1.jpg">
  <img class="grid-item" src="2.jpg">
  <img class="grid-item" src="3.jpg">
  <img class="grid-item" src="4.jpg">
  <img class="grid-item" src="5.jpg">
  ...
</div>

2. Include jQuery and the jQuery Justified plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="dist/js/imagesLoaded.min.js"></script>

3. Include the jQuery imagesLoaded plugin to render the gallery after all the images have been loaded completely.

<script src="/path/to/imagesloaded.min.js"></script>

4. Create a new justifiedGrid object with some parameters.

var parameters = {
    gridContainer: '#grid-container',
    gridItems: '.grid-item',
    gutter: 5,
    enableImagesLoaded: true
};
var grid = new justifiedGrid(parameters);

5. Initialize the image gallery / grid.

var parameters = {
    gridContainer: '#grid-container',
    gridItems: '.grid-item',
    enableImagesLoaded: true
};
var grid = new justifiedGrid(parameters);

6. Customize the plugin in the CSS as follows:

#grid-container {
  width: 90%;
  margin: auto;
  overflow: hidden;
}

.grid-item {
  opacity: 0;
  float: left;
  padding: 5px;
  box-sizing: border-box;
}

.grid-item img {
  width: 100%;
  height: 100%;
}

.grid-item.loaded {
  opacity: 1;
  transition: opacity .5s;
}

Change log:

2016-10-16

• Add: gutter parameter. 

---

This awesome jQuery plugin is developed by Kim-Thomas. For more Advanced Usages, please check the demo page or visit the official website.