A Pen by Kristofer Goss.

index.html

<div class="module-container">
  <!-- sizers -->
  <div class="module-sizer"></div>
  <div class="gutter-sizer"></div>

  <div class="module">Module 1</div>
  <div class="module wide">Module 2</div>
  <div class="module">Module 3</div>
  <div class="module wide">Module 4</div>
  <div class="module">Module 5</div>
  <div class="module">Module 6</div>
  <div class="module wide">Module 7</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"></script>

Packery-Responsive-Layout.markdown

Packery Responsive Layout

A Pen by Kristofer Goss on CodePen.

License.

script.js

docReady(function() {
  var container = document.querySelector('.module-container');
  var packery = new Packery(container, {
    columnWidth: '.module-sizer',
    itemSelector: '.module',
    gutter: '.gutter-sizer',
    rowHeight: '.module-sizer'
  });
  
  var items = packery.getItemElements();
  angular.forEach(items, function(item) {
    var dragger = new Draggabilly(item);
    packery.bindDraggabillyEvents(dragger);
  });
  
  packery.layout();
});

style.scss

@import "compass";
* {
  @include box-sizing(border-box);
}

.module-container {
  width: 100%;
  border: 1px solid darken(#eaeaea, 10%);
  
  .gutter-sizer {
    width: 2%;
    display: none;
  }
  
  /* clearfix */
  .module-container:after {
    content: ' ';
    display: block;
    clear: both;
  }
  
  .module, .module-sizer {
    height: 200px;
    width: 25%;
    border: 1px solid #eaeaea;
    background-color: darken(#eaeaea, 15%);
  }
  
  .module {
    float: left;
    &.wide {
      width: 50%;
    }
    &:hover {
      background-color: darken(#eaeaea, 17%);
      cursor: pointer;
    }
    &.is-dragging {
      z-index: 2;
    }
  }
}