title: Shufflejs calculating heights incorrectly
body: <p>Sometimes on this page <a href="http://www.georidersmtb.com/tours/" rel="nofollow">http://www.georidersmtb.com/tours/</a> when you refresh it the box elements overlap each other. It looks like the heights are not being set correctly on the container. Would where I load shufflejs in the page cycle make a difference? Currently its being loaded in the footer.</p>
  
  <pre><code>   //shuffle
      var $grid = $('#grid'),
          $sizer = $grid.find('.shuffle__sizer');
      $grid.shuffle({
          itemSelector: '.picture-item',
          sizer: $sizer
      });
      $('#sub-bike').hide();
      $('.sort-options').on('change', function() {
          var sort = this.value.toLowerCase();
          if (sort == 'bike') {
              $('#sub-bike').show();
          } else {
              $('#sub-bike').hide();
          }
          $grid.shuffle('shuffle', function($el, shuffle) {
              // console.log(sort);
              if (sort == '') {
                  return $el.data('type');
              } else {
                  return $el.data('type') === sort;
              }
          });
      });
      $('#sub-bike').on('change', function() {
          var sort = this.value.toLowerCase();
          $grid.shuffle('shuffle', function($el, shuffle) {
              // console.log(sort);
              if (sort == '') {
                  return $el.data('type') === 'bike';
              } else {
                  return ($el.data('subtype') === sort &amp;&amp; $el.data('type') === 'bike');
              }
          });
      });
  
  
  
  
  &lt;select class=" form-control sort-options"&gt;
              &lt;option value=""&gt;Default&lt;/option&gt;
              &lt;option value="bike"&gt;Bike&lt;/option&gt;
              &lt;option value="city"&gt;City&lt;/option&gt;
          &lt;/select&gt;
          &lt;select id="sub-bike" class=" form-control"&gt;
              &lt;option value=""&gt;Default&lt;/option&gt;
              &lt;option value="day-trip"&gt;Day Trip&lt;/option&gt;
              &lt;option value="full-tour"&gt;Full Tour&lt;/option&gt;
          &lt;/select&gt;
          &lt;div id="grid"&gt;
              {% for tour in tours %} 
  
                  &lt;figure style="margin-bottom:20px !important; " class="col-xs-12 col-sm-6 col-md-4 picture-item" data-groups='["{{tour.type|lower }}"]' data-type="{{tour.type|lower }}" data-subtype="{{tour.subtype|lower}}"&gt;
                      &lt;a href="/tour/georgia/{{tour.alias}}/"&gt;&lt;img src="/img/background_images/thumb-{{tour.background_image|default('na.png') }}" class="my-thumb-class img-responsive" alt="Image for {{tour.title}}" /&gt;
                      &lt;div class="picture-item__details"&gt;
                          &lt;figcaption class="picture-item__title"&gt;
                          &lt;h2 style="color:white;" class="article-h2"&gt;{{tour.name}}&lt;/h2&gt;
                              &lt;/figcaption&gt;
                              &lt;p class="picture-item__tags"&gt;
                                  {{tour.date|date(("m/d/Y"))}}
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
                      &lt;/figure&gt;
                  {% endfor %}
              &lt;/div&gt;
          &lt;/div&gt;&lt;/div&gt;
  </code></pre>