Minimalist Masonry-style Grid Layout Plugin - Masonry.js

Yet another jQuery plugin that makes it easier to create responsive, fluid/elastic grid layout like the famous Masonry or Pinterest layouts. Just weights in 2kb and very easy to implement.

How to use it:

1. Add references to jQuery library and the jQuery Masonry.js plugin in your html page.

<script src="//code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="js/masonry.min.js"></script>

2. Add a grid of items to the page.

<div class="msrItems">
  <div class="msrItem"></div>
  <div class="msrItem"></div>
  <div class="msrItem"></div>
  <div class="msrItem"></div>
  <div class="msrItem"></div>
  <div class="msrItem"></div>
  <div class="msrItem"></div>
</div>

3. The JavaScript to render the html as a Masonry like grid layout.

$('.msrItems').msrItems({
  'colums': 3, //columns number
  'margin': 15 //right and bottom margin
});

4. Update columns size on window resize.

$( window ).on('resize', function(e) {
  clearTimeout(time);
  time = setTimeout(function(){
    $('.msrItems').msrItems('refresh');
  }, 200);
})

About Author:

Author: Katniss

Website: https://github.com/umkka/jquery-grid

---

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