title: Determine the alignment order of the items with packery
body: <p>This is my codepen: <a href="http://codepen.io/helloworld/pen/JoKmQr" rel="nofollow noreferrer">http://codepen.io/helloworld/pen/JoKmQr</a></p>
  
  <p>Lets assume I get an array of data from the server. The data has a title and an order number.</p>
  
  <p>I have 5 array items with orderNumber from 1 to 5.</p>
  
  <p>Now I want to layout 5 divs where each div is positioned at a certain place in the packery layout system.</p>
  
  <p>See this image:</p>
  
  <p><img src="https://i.stack.imgur.com/jsxML.png" alt="enter image description here"></p>
  
  <p>The colors are NOT important. What is important is the order of the divs according to their order number.</p>
  
  <p>The flow of the orderNumber goes from <strong>top</strong> to <strong>down</strong> and from <strong>left</strong> to <strong>right</strong>.</p>
  
  <p><strong>QUESTION</strong>:</p>
  
  <p>How can I determine the order of the divs in the layout system? That they layout automatically to my wanted flow? Or hint about ordering manually would also be fine :-)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt;Packery demo - Draggabilly&lt;/h1&gt;
  &lt;div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'&gt;
    &lt;div class="item w1"&gt;&lt;/div&gt;
    &lt;div class="item h4"&gt;&lt;/div&gt;
    &lt;div class="item w2"&gt;&lt;/div&gt;
    &lt;div class="item w3"&gt;&lt;/div&gt;
    &lt;div class="item h2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
    -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);
    counter-reset: item;
    height: 400px;
  }
  
  /* clearfix */
  .packery:after {
    content: ' ';
    display: block;
    clear: both;
  }
  
  .item {
    width: 80px;
    height: 80px;
    float: left;
    border: 4px solid #333;
    border-color: hsla(0, 0%, 0%, 0.3);
  }
  
  .item:hover {
    border-color: white;
    cursor: move;
  }
  
  .item.w1 { width:   80px; background:green; }
  .item.w2 { width:   80px; background:blue; }
  .item.w3 { width:   80px; background:yellow; }
  .item.h2 { height:  80px; background:red; }
  .item.h4 { height: 160px; width:80px; background:orange;}
  
  .item:before {
    counter-increment: item;
    content: counter(item);
    display: block;
    color: white;
    padding-top: 0.2em;
    text-align: center;
    font-size: 18px;
  }
  
  .item.is-dragging,
  .item.is-positioning-post-drag {
    border-color: white;
    background: #09F;
    z-index: 2;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// external js
  // http://packery.metafizzy.co/packery.pkgd.js
  // http://draggabilly.desandro.com/draggabilly.pkgd.js
  
  $( function() {
  
    var $container = $('.packery').packery({
      columnWidth: 80,
      rowHeight: 80
    });
  
    $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 );
    });
  
  });
  </code></pre>