在我的项目中的效果 : http://lixianglong3210.gitee.io/packery/

官网地址: https://packery.metafizzy.co/

入门用法

1、筛选过滤

（官网例子:https://codepen.io/desandro/pen/mjcGq）

html

<h1>Packery demo - Draggabilly with appended items</h1>
<div class="packery">
  <div class="item w4 h2"></div>
  <div class="item w2 h2"></div>
  <div class="item w2 h4"></div>
  <div class="item w2 h2"></div>
  <div class="item w4 h4"></div>
  <div class="item w2 h2"></div>
  <div class="item w2 h4"></div>
  <div class="item w4 h4"></div>
  <div class="item w2 h2"></div>
  <div class="item w2 h2"></div>
</div>

<p><button id="add-items">Add more items</button>

css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  background: #FDD;
  background: hsla(45, 100%, 40%, 0.2);
  max-width: 520px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 40px;
  height: 40px;
  float: left;
  background: #C09;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
}

.item:hover {
  border-color: white;
  cursor: move;
}

.item.w2 { width:   80px; background: #9C0; }
.item.h2 { height:  80px; background: #0C9; }
.item.h4 { height: 160px; background: #C90; }
.item.w4 { width:  160px; background: #90C; }

.item.is-dragging,
.item.is-positioning-post-drag {
  border-color: white;
  background: #09F;
  z-index: 2;
}

button {
  font-size: 20px;
}

javascript

// https://packery.metafizzy.co/packery.pkgd.js and 
// https://draggabilly.desandro.com/draggabilly.pkgd.js added as external resource

var $container = $('.packery');

$container.packery({
  columnWidth: 80,
  rowHeight: 80
});

// bind draggabilly events to item elements
$container.find('.item').each( makeEachDraggable );

function makeEachDraggable( i, itemElem ) {
  // make element draggable with Draggabilly
  var draggie = new Draggabilly( itemElem );
  // bind Draggabilly events to Packery
  $container.packery( 'bindDraggabillyEvents', draggie );
}

// add more items
$('#add-items').click( function() {
  var items = '<div class="item w2 h2"></div>' +
    '<div class="item w2 h2"></div>' +
    '<div class="item w4 h2"></div>' +
    '<div class="item h4 w4"></div>' +
    '<div class="item w2 h2"></div>' +
    '<div class="item w2 h4"></div>' +
    '<div class="item w2 h2"></div>';
  var $items = $(items);
  // add to packery layout
  $container.append( $items )
    .packery( 'appended', $items )
  // make item elements draggable
  $items.each( makeEachDraggable );
});