Tiny Responsive Grid Layout Plugin For jQuery - Marshal

Marshal is a lightweight and simple-to-use jQuery plugin used to generate a responsive, fluid, card- or brick-style grid layout from a group of html elements.

Basic usage:

1. Add jQuery JavaScript library and the jQuery Marshal plugin into your html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/marshal.js"></script>

2. Wrap a group of elements into a container.

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

3. The JavaScript to generate a fluid card-style grid layout.

// MarshalGrid(container, element, formation, gutter);
var cards = new MarshalGrid('#demo_wrapper', '.item', 'cards', 10);
cards.breakpoints = [250, 400, 600];
cards.enlist();
cards.cards();

4. The JavaScript to generate a neat brick-style grid layout.

// MarshalGrid(container, element, formation, gutter);
var bricks = new MarshalGrid('#demo_wrapper', '.item', 'bricks');
bricks.enlist();
bricks.bricks();

5. Recall the plugin on window reszie.

$(window).resize(function() {
  window.cards.cards();
  window.bricks.bricks();
});

Change log:

2016-01-17

• Adding function to initialize new grid.
• Change default gutter setting.

2016-01-15

• Add height to bricks wrapper.

2016-01-14

• Refactor bricks formation to be absolute positioned
• Add css visibility settings.

---

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