Responsive Filterable And Draggable Grid System - Muuri
File Size: | 77.9 KB |
---|---|
Views Total: | 8922 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Muuri.js is a powerful jQuery plugin used to generate a responsive, dynamic, animated, sortable, filterable grid layout for your modern web projects.
Key features:
- Allows to re-sort grid items via drag and drop. Requires hammer.js.
- Allows to filter/search through grid items via input field.
- Smooth, fast animations based on Velocity.js.
- Auto resizes and re-positions grid items on window resize.
- Lots of API methods and events.
View more:
How to use it:
1. Include the latest version of jQuery library and other required JS resources on the webpage.
<script src="/path/to/jquery-3.1.1.min.js"></script> <script src="/path/to/velocity.min.js"></script> <script src="/path/to/hammer.min.js"></script>
2. Add initial grid items to the layout system.
<div class="grid"> <div class="item"> <div class="item-content"> Item 1 </div> </div> <div class="item"> <div class="item-content"> Item 2 </div> </div> <div class="item"> <div class="item-content"> Item 3 </div> </div> </div>
3. Apply your own CSS styles to the grid items and drag handlers.
.grid { position: relative; margin: 20px 0; border: 5px solid #ff0000; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .item { position: absolute; width: 100px; height: 100px; line-height: 100px; margin: 5px; z-index: 1; } .item.muuri-dragging, .item.muuri-releasing { z-index: 9999; } .item.muuri-dragging { cursor: move; } .item.muuri-hidden { z-index: 0; } .item.h2 { height: 210px; line-height: 210px; } .item.w2 { width: 210px; } .item-content { position: relative; width: 100%; height: 100%; } .item-stuff { position: absolute; left: 0; top: 0; right: 0; bottom: 0; text-align: center; font-size: 24px; background: #000; color: #fff; -moz-transform: scale(1) translateZ(0); -webkit-transform: scale(1) translateZ(0); -o-transform: scale(1) translateZ(0); -ms-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); -webkit-transition: -webkit-transform 0.2s ease-out, background-color 0.2s ease-out; -moz-transition: -moz-transform 0.2s ease-out, background-color 0.2s ease-out; -ms-transition: -ms-transform 0.2s ease-out, background-color 0.2s ease-out; -o-transition: -o-transform 0.2s ease-out, background-color 0.2s ease-out; transition: transform 0.2s ease-out, background-color 0.2s ease-out; } .item.muuri-dragging .item-stuff { background: #ff0000; -moz-transform: scale(1.1) translateZ(0); -webkit-transform: scale(1.1) translateZ(0); -o-transform: scale(1.1) translateZ(0); -ms-transform: scale(1.1) translateZ(0); transform: scale(1.1) translateZ(0); }
4. Create a new Muuri object to initialize the grid layout.
var grid = new Muuri({ // options here });
5. All default options to customize the grid layout.
var grid = new Muuri({ // Container container: null, // Items items: [], positionDuration: 300, positionEasing: 'ease-out', show: { duration: 300, easing: 'ease-out' }, hide: { duration: 300, easing: 'ease-out' }, // Layout layout: 'firstFit', layoutOnResize: 100, layoutOnInit: true, // Drag & Drop dragEnabled: false, dragContainer: null, dragPredicate: null, dragSort: true, dragSortInterval: 50, dragSortTolerance: 50, dragSortAction: 'move', dragReleaseDuration: 300, dragReleaseEasing: 'ease-out', // Classnames containerClass: 'muuri', itemClass: 'muuri-item', shownClass: 'muuri-shown', hiddenClass: 'muuri-hidden', positioningClass: 'muuri-positioning', draggingClass: 'muuri-dragging', releasingClass: 'muuri-releasing' });
This awesome jQuery plugin is developed by haltu. For more Advanced Usages, please check the demo page or visit the official website.