A Pen by chrisarmstrong.

index.html

<div id="container">
</div>

Mondrian.markdown

Mondrian

A Pen by chrisarmstrong on CodePen.

License.

script.js

// init


var i=34;

for (i; i > -1; i--) {
      
      switch (Math.round(Math.random()*10)) {
        case 1:
          $('#container').append('<div class="item w2"></div>');
          i = i-1;
          break;
        case 2:
          $('#container').append('<div class="item h2"></div>');
          i = i-1;
          break;
        case 3:
          $('#container').append('<div class="item h2 w2"></div>');
          i = i-3;
          break;
        case 4:
          $('#container').append('<div class="item h3"></div>');
          i = i-2;
          break;
        case 5:
          $('#container').append('<div class="item w3"></div>');
          i = i-2;
          break;
        case 6:
          $('#container').append('<div class="item w3 h3"></div>');
          i = i-8;
          break;
        case 7:
          $('#container').append('<div class="item w2 h3"></div>');
          i = i-5;
          break;
        case 8:
          $('#container').append('<div class="item h2 w3"></div>');
          i = i-5;
          break;
        default:
        $('#container').append('<div class="item"></div>');
      }

      if (i<=0) {
        layout();
      }
}

function layout() {
    var $container = $('#container');
     
    $container.packery({
      itemSelector: '.item',
      gutter:20,
      columnWidth: 48,
      rowHeight: 48
    });

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

style.css

.item {
  width:48px;
  height:48px;
  background:white;
  display:block;
}

.item:nth-child(3){
  background:red;
}

.item:nth-child(7){
  background:blue;
}

.item:nth-child(9){
  background:yellow;
}

.w2 {
  width:116px;
}

.h2 {
   height:116px;
}

.h3 {
   height:184px;
}

.w3 {
   width:184px;
}

body {
  width:100%;
  height:100%;
  background:black;
}

#container {
  width:320px;
  min-height:568px;
  max-height:568px;
  overflow:hidden;
  outline:1px solid white;
  margin:auto;
}