Muuri.js demo

Muuri creates responsive, sortable, filterable and draggable grid layouts. It's very useful for both PC and mobile. Muuri uses Velocity for animating the grid items (positioining/showing/hiding) and Hammer.js for handling the dragging. Hammer.js is an optional dependency that is only required if dragging is enabled, but Velocity is a hard dependency.

The author is  working on 3.0 version now and I think this plugin will be popular in the future. And the offiicial demo is  demo here. And I just practice how to use it easily. 

Getting start!
1. Link js file in the body:

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.4.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.jss"></script>
<!-- Needs to be within in body element or have access to body element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/muuri/0.2.0/muuri.min.js"></script>

I linked the urls  from cdnjs website.

2.HTML layout

-->grid -->item  -->item-content -->item  -->item-content

I set a picture each in the item-content inside.

The grid position should be relative,and  the second layer item is abosolute.The third part item-content is relative to item. For dargging function, setting index for normal,dragging and hidden is a good way to show up the images.

I got different size of images inside, so I didn't set the exact width and height.

3.JS

Options

• container  —  element
  • Default value: null.
  • The container element. Must be always defined.
• items  —  array of elements
  • Default value: [].
  • The initial item elements wrapped in an array. The elements must be children of the container element.
• positionDuration  —  number
  • Default value: 300.
  • The duration for item's positioning animation in milliseconds. Set to 0 to disable.
• positionEasing  —  string / array
  • Default value: "ease-out".
  • The easing for item's positioning animation. Read Velocity's easing documentation for more info on possible easing values.
• show  —  object
  • Default value: {duration: 300, easing: "ease-out"}.
  • The object should contain duration (integer, milliseconds) and easing properties. Set to null to disable hide animation altogether.
• hide  —  object
  • Default value: {duration: 300, easing: "ease-out"}.
  • The object should contain duration (integer, milliseconds) and easing properties. Set to null to disable hide animation altogether.
• layout  —  array / function / string
  • Default value: "firstFit".
  • Define the layout method to be used for calculating the positions of the items. If you provide a string or an array Muuri will try to locate a registered layout method in Muuri.Layout.methods object. Currently there is only one built-in method: "firstFit".
  • The array syntax is the only way to use the built-in layout methods and provide arguments for them. The first value should be a string (name of the method) and the second value (optional) should be a configuration object, e.g.["firstFit", {horizontal: true}].
  • You can always just provide a function which will receive a Muuri.Layout instance as it's context which you can manipulate as much as you want to get the items to the wanted positions. More info about rolling your own layout method is coming up later on, but in the meantime you can check the source code and see how the default method is implemented.
  • Available methods and related settings:
    • "firstFit"
      • horizontal (type: boolean, default: false)
        • When true the grid works in landscape mode (grid expands to the right). Use for horizontally scrolling sites. When false the grid works in "portrait" mode and expands downwards.
      • alignRight (type: boolean, default: false)
        • When true the items are aligned from right to left.
      • alignBottom (type: boolean, default: false)
        • When true the items are aligned from the bottom up.
      • fillGaps (type: boolean, default: false)
        • When true the algorithm goes through every item in order and places each item to the first available free slot, even if the slot happens to be visually before the previous element's slot. Practically this means that the items might not end up visually in order, but there will be less gaps in the grid. By default this options is false which basically means that the following condition will be always true when calculating the layout: nextItem.top > prevItem.top || (nextItem.top === prevItem.top && nextItem.left > prevItem.left). This also means that the items will be visually in order.
• layoutOnResize  —  null / number
  • Default value: 100.
  • Should Muuri automatically trigger layout on window resize? Set to null to disable. When a number (0 or greater) is provided Muuri will automatically trigger layout when window is resized. The provided number equals to the amount of time (in milliseconds) that is waited before the layout is triggered after each resize event. The layout method is wrapped in a debouned function in order to avoid unnecessary layout calls.
• layoutOnInit  —  boolean
  • Default value: true.
  • Should Muuri trigger layout automatically on init?
• dragEnabled  —  boolean
  • Default value: false.
  • Should items be draggable?
• dragContainer  —  null / element
  • Default value: null.
  • Which item should the dragged item be appended to for the duration of the drag? If null is provided the item's muuri container element will be used.
• dragPredicate  —  null / function
  • Default value: null.
  • A function that determines when dragging should start. Set to null to use the default predicate.
• dragSort  —  boolean
  • Default value: true.
  • Should the items be sorted during drag?
• dragSortInterval  —  number
  • Default value: 50.
  • When an item is dragged around the grid Muuri automatically checks if the item overlaps another item enough to move the item in it's place. The overlap check method is debounced and this option defines the debounce interval in milliseconds. In other words, this is option defines the amount of time the dragged item must be still before the overlap is checked.
• dragSortTolerance  —  number
  • Default value: 50.
  • Allowed values: 1 - 100.
  • How many percent the intersection area between the dragged item and the compared item should be from the maximum potential intersection area between the two items in order to justify for sorting to occur.
• dragSortAction  —  string
  • Default value: "move".
  • Allowed values: "move", "swap".
  • Should the dragged item be moved to the new position or should it swap places with the item it overlaps?
• dragReleaseDuration  —  number
  • Default value: 300.
  • The duration for item's drag release animation. Set to 0 to disable.
• dragReleaseEasing  —  string / array
  • Default value: "ease-out".
  • The easing for item's drag release animation. Read Velocity's easing documentation for more info on possible easing values.
• containerClass  —  string
  • Default value: "muuri".
  • Container element classname.
• itemClass  —  string
  • Default value: "muuri-item".
  • Item element classname.
• shownClass  —  string
  • Default value: "muuri-shown".
  • Visible item classname.
• hiddenClass  —  string
  • Default value: "muuri-hidden".
  • Hidden item classname.
• positioningClass  —  string
  • Default value: "muuri-positioning".
  • This classname will be added to the item element for the duration of positioing.
• draggingClass  —  string
  • Default value: "muuri-dragging".
  • This classname will be added to the item element for the duration of drag.
• releasingClass  —  string
  • Default value: "muuri-releasing".
  • This classname will be added to the item element for the duration of release.

Asked some questions in github:
1.
Why the images concluded in the item-content can not be dragged?

If you have images or links inside the items or if the item itself is link or image Muuri's dragging will not work as you might expect. That's because images and links have native browser dragging enabled (try to drag any link or image on this very page and you will see that it will be dragged), which interferes with Muuri's Hammer.js bindings. So to overcome this problem you need to manually prevent the browser's native dragging for images and links within Muuri's items.

Here's a very basic example that will get the job done for images in your demo:

// Prevent native image drag for images inside items.
var images = document.querySelectorAll('.item img');
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener('dragstart', function (e) {
    e.preventDefault();
  }, false);
}

The author will figure it out in upcoming 3.0.version.


2.
Is that OK to insert different size pictures?

Yes. Any item can be any size. Just remember to call muuri.refresh() method whenever any item's dimensions are changed after initiating the Muuri instance. In your demo the images inside the items were not loaded when Muuri was initiated so the items had width and height of 0px during initiation, which caused all the items to overlap each other when the images were finally loaded. You need to callmuuri.refresh() and muuri.layout() (in that order) after the images have loaded or provide a fixed width and height for the items.