Responsive Filterable And Draggable Grid System - Muuri

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:

• 50 Best Grid Layout jQuery Plugins

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.