Lightweight Masonry-like Grid Plugin For jQuery - grid.js

Yet another ultra light weight (4.3kb) jQuery plugin for generating responsive Masonry-like layout that displays your cells in a grid in a surely nice way.

More examples:

• Basic: This most basic example has 50 cells and no loading spinner. The cells have absolute positioning percentage wdth and fixed height.
• Breakpoint: This example has 50 cells and 3 breakpoints - so 4 different configurations. The cells have absolute positioning percentage wdth and fixed height.
• Responsive Image: This example has 90 cells and a loading spinner. The grid load is defered of 2 seconds so you can see it. The cells have absolute positioning percentage wdth and fixed height.

Basic usage:

1. Include jQuery library and the minified version of the grid.js on the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/grid.min.js"></script>

2. Include the required style sheet in the document's head section.

<link rel="stylesheet" href="css/grid.css">

3. Add grid cells together with a loading indicator to the webpage.

<div class="thegrid">
  <div class="loading"></div>
  <div class="cell" data-width="1" data-height="4"><div data-text="0"></div></div>
  <div class="cell" data-width="1" data-height="1"><div data-text="1"></div></div>
  <div class="cell" data-width="2" data-height="1"><div data-text="2"></div></div>
  <div class="cell" data-width="2" data-height="1"><div data-text="3"></div></div>
  <div class="cell" data-width="2" data-height="1"><div data-text="4"></div></div>
  <div class="cell" data-width="2" data-height="1"><div data-text="5"></div></div>
  <div class="cell" data-width="3" data-height="1"><div data-text="6"></div></div>
  <div class="cell" data-width="1" data-height="3"><div data-text="7"></div></div>
  <div class="cell" data-width="2" data-height="1"><div data-text="8"></div></div>
  <div class="cell" data-width="1" data-height="2"><div data-text="9"></div></div>
  <div class="cell" data-width="1" data-height="1"><div data-text="10"></div></div>
  <div class="cell" data-width="1" data-height="2"><div data-text="11"></div></div>
  <div class="cell" data-width="1" data-height="2"><div data-text="12"></div></div>
  <div class="cell" data-width="3" data-height="1"><div data-text="13"></div></div>
  <div class="cell" data-width="1" data-height="2"><div data-text="14"></div></div>
  <div class="cell" data-width="1" data-height="2"><div data-text="15"></div></div>
  <div class="cell" data-width="1" data-height="1"><div data-text="16"></div></div>
  <div class="cell" data-width="1" data-height="1"><div data-text="17"></div></div>
  <div class="cell" data-width="4" data-height="1"><div data-text="18"></div></div>
  <div class="cell" data-width="2" data-height="1"><div data-text="19"></div></div>
</div>

4. All configuration options with default values.

$('.thegrid').grid({

  // The container of the cells.
  grid: $('.thegrid'),

  // The cells to render / place / filter.
  cells: $('.cell'),

  // How many cells per row
  cellsPerRow: 7,

  // Cell height in pixels.
  // You can also define a function like so:
  // function(gh){return ((gh.gridWidth / gh.options.cellsPerRow) * 262 / 400) + 100};
  // But be aware that it will be much more costy (you may opt for throttling).
  cellHeight: 100,

  // Animations.
  // By default the cells animation will be handled via CSS transitions as it is known to be smoother and
  // of better performances. however if you want some fancy easing effects (e.g. elastic or bounce) you may
  // want to switch to javascript animations. If so just turn animationPlatform to 'js' and provide the easing
  // speed and curve that you want.
  // You can also override the default CSS transitions in a custom CSS like:
  // .thegrid.transitions .cell {
  //     -webkit-transition: .3s ease-in-out;
  //     -o-transition: .3s ease-in-out;
  //     transition: .3s ease-in-out;
  // }
  animationPlatform: 'css',// 'css' or 'js'.
  animationSpeed: 500,
  animationEasing: 'linear',
  animationDelay: 0,

  // On each render.
  updateGridHeight: true,

  // Responsiveness.
  // Only if breakpoints are set the redraw() function is triggered on each resize event.
  // You can throttle the redraw to alight the resizing event.
  // (while resizing the redraw() function is exec every throttlingDelay milliseconds)
  throttling: false,

  // in ms.
  throttlingDelay: 300,
  
  /* Breakpoints (from desktop to mobile) to have a different behavior according to the device screen width.
  Example of use:
  breakpoints:
  {
      1199:
      {
          cellsPerRow: 5
      },
      767:
      {
          cellsPerRow: 4
      },
      479:
      {
          cellsPerRow: 3
      },
  }*/
  breakpoints: {},

  sortingCriteria: {}
  
});

Change logs:

2017-04-24

• JS update

2017-01-09

• Fix a sorting issue on Safari.
• Avoid circular error due to recursion.

2016-12-27

• Update sorting example and add the sort feature inside the grid.js.

2016-12-23

• CSS update

2016-12-19

• Rename option useJsTransitions to animationPlatform (js/css).

2016-12-16

• JS update.

2016-12-15

• Dynamically append initial config in array of breakboints for reuse.

2016-12-14

• animate code section toggle with auto content height.

2016-12-13

• Update JS to use CSS transitions by default and JS animation as a possible alternative.
• Update code comments and rename gridHandler to 'thegrid'.

2016-12-11

• JS Update.

---

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