isotope/_includes/elements-demo-foot.html

<script src="../{{ site.jquery_js }}"></script>
<script src="../{{ site.isotope_js }}"></script>
<script src="../js/fake-element.js"></script>
<script>
  $(function(){
    
    var $container = $('#container');
    
    {% include random-sizes.js %}
    
    $container.isotope({
      itemSelector : '.element',
      masonry : {
        columnWidth : 120
      },
      masonryHorizontal : {
        rowHeight: 120
      },
      cellsByRow : {
        columnWidth : 240,
        rowHeight : 240
      },
      cellsByColumn : {
        columnWidth : 240,
        rowHeight : 240
      },
      getSortData : {
        symbol : function( $elem ) {
          return $elem.attr('data-symbol');
        },
        category : function( $elem ) {
          return $elem.attr('data-category');
        },
        number : function( $elem ) {
          return parseInt( $elem.find('.number').text(), 10 );
        },
        weight : function( $elem ) {
          return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );
        },
        name : function ( $elem ) {
          return $elem.find('.name').text();
        }
      }
    });
    
    {% include option-set-buttons.js %}

    // toggle variable sizes of all elements
    $('#toggle-sizes').find('a').click(function(){
      $container
        .toggleClass('variable-sizes')
        .isotope('reLayout');
      return false;
    });

    {% include layout-change.js %}

    {% include add-buttons.js %}

    $('#shuffle a').click(function(){
      $container.isotope('shuffle');
      return false;
    });
    
    // change size of clicked element
    $container.find('.element').live('click', function(){
      $(this).toggleClass('large');
      $container.isotope('reLayout');
    });


  });
</script>