Tiny Responsive Grid Layout Plugin For jQuery - Marshal
File Size: | 3.06 MB |
---|---|
Views Total: | 2682 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.