title: Initialize filtered items in Isotope
body: <p>I have a problem with Isotope plugin (jQuery). I want to initialize plugin with already filtered items. I have seen some post on this topic, but answers were not clear.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="filters"&gt;
    &lt;div class="ui-group"&gt;
      &lt;div class="button-group js-radio-button-group" data-filter-group="gender"&gt;
        &lt;button class="button is-checked" data-filter=""&gt;BOTH&lt;/button&gt;
        &lt;button class="button" data-filter=".female"&gt;FEMALE&lt;/button&gt;
        &lt;button class="button" data-filter=".male"&gt;MALE&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That's my items:</p>
  
  <pre><code>&lt;div class="grid"&gt;
    &lt;div class="colar-shape female"&gt;1&lt;/div&gt;
    &lt;div class="colar-shape male"&gt;2&lt;/div&gt;
    &lt;div class="colar-shape female"&gt;3&lt;/div&gt;
    &lt;div class="colar-shape male"&gt;4&lt;/div&gt;
    &lt;div class="colar-shape female"&gt;5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Finally, initialization code in JS:</p>
  
  <pre><code>$(document).ready( function() {
    // init Isotope
    var $grid = $('.grid').isotope({
      itemSelector: '.color-shape',
      layoutMode: 'fitRows'
    });
  
    // store filter for each group
    var filters = {};
  
    $('.filters').on( 'click', '.button', function() {
      var $this = $(this);
      // get group key
      var $buttonGroup = $this.parents('.button-group');
      var filterGroup = $buttonGroup.attr('data-filter-group');
      // set filter for group
      filters[ filterGroup ] = $this.attr('data-filter');
      // combine filters
      var filterValue = concatValues( filters );
      // set filter for Isotope
      $grid.isotope({ filter: filterValue });
    });
  
    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });
  
  });
  
  // flatten object by concatting values
  function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
      value += obj[ prop ];
    }
    return value;
  }
  </code></pre>
  
  <p>So, how to load divs 1, 3 and 5 when page is loaded?</p>
  
  <p>Thank you very much!</p>