justified

A jQuery plugin to create simple justified grids.

Getting Started

Include the justified.js file and the justified.css file.

<!-- In the header, after your own css --> <link href="css/justified.css" rel="stylesheet">

<!-- Just before closing body tag --> <script src="js/justified.min.js"></script>

Let's now write the HTML

<div id="grid-container">   <img class="grid-item" src="images/tokyo-night.jpg">   <img class="grid-item" src="images/tokyo-tower.jpg">   <img class="grid-item" src="images/tokyo-view.jpg">   <img class="grid-item" src="images/akihabara.jpg">   <img class="grid-item" src="images/fuji.jpg">   <img class="grid-item" src="images/lake-fuji.jpg"> </div>

You can now initialize the grid according to the html

<script>   var parameters = {     gridContainer: '#grid-container',     gridItems: '.grid-item', 	  gutter: 5,     enableImagesLoaded: false   };   var grid = new justifiedGrid(parameters);   grid.initGrid(); </script>

Customizing

Most of the customizing work will be done directly in the CSS, here is the commented version

#grid-container { // The grid container   width: 90%; // well, the width, obviously   margin: auto; // just in order to center it   overflow: hidden; // important, it allows this div to actually have a height since grid items are in float:left; }  .grid-item {   opacity: 0; // for the animation, you can remove it.   float: left; // important   box-sizing: border-box; // so that the gutter works well }  .grid-item img { // just in case you want to wrap the image inside a link for example   width: 100%;   height: 100%; }  .grid-item.loaded { // the loaded animation   opacity: 1;   transition: opacity .5s; }

Options

• gridContainer : your grid container selector
• gridItems : your grid items selector
• gutter : set the margins between images
• enableImagesLoaded : (optional)(default: false) determine if justified should use the awesome plugin from Dessandro "ImagesLoaded" ( you'll have to include it yourself though ).

MIT License

Justified is released under the MIT License. Have fun with it.

Credits

• Demo Pictures : they are all from pixabay :) thanks to their awesome users sharing these super cool pictures !
• ImagesLoaded : another awesome jquery plugin from Dessandro. Check his website : https://github.com/desandro/imagesloaded