Create A Justified Grid Of Images With jQuery - Grid Horizontal

Grid Horizontal is an easy-to-use jQuery plugin to create responsive justified/cascading image grids that allow you to set the min-width of images, max height of rows and space between images.

How to use it:

1. Add your own images (with varying sizes) to the grid layout.

<div class="container">
 <div class="item">
    <a href="#">
      <img src="https://picsum.photos/640/480/?random" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="https://picsum.photos/480/640/?random" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="https://picsum.photos/640/482/?random" />
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="https://picsum.photos/480/641/?random" />
    </a>
  </div>
  ...
</div>

2. Load jQuery JavaScript library and the GridHorizontal.js script in the document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/GridHorizontal.js"></script>

3. Call the function on the top container and done.

$('div.container').GridHorizontal();

4. Set the minimum container width to initiate calculation.

$('div.container').GridHorizontal({
  minWidth: 300
})

5. Set the maximum row height. The plugin pulls next images as long as total row height gets smaller then 'maxRowHeight' value.

$('div.container').GridHorizontal({
  maxRowHeight: 320
})

6. Set the gutter width in pixels.

$('div.container').GridHorizontal({
  gutter: 20
})

7. Change the default item selector.

$('div.container').GridHorizontal({
  item: '.item'
})

---

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