1 ---

     2 title: Category rows

     3 layout: default

     4 category: custom-layout-modes

     5 ---

     6 

     7 <section id="copy">

     8   <p>This demo uses a <a href="../docs/extending-isotope.html">custom layout mode</a>, <code>categoryRows</code> that arranges elements into rows based on their category. The layout mode logic relies on sorting to define rows.</p>

     9 </section>

    10 

    11 <section id="options" class="clearfix">

    12 

    13   {% include filter-buttons.html %}

    14 

    15   <h3>Etc</h3>

    16 

    17   <ul id="etc" class="clearfix">

    18     <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    19     <li id="insert"><a href="#insert">Insert new elements</a></li>

    20   </ul>

    21 </section> <!-- #options -->

    22 

    23 <div id="container" class="clearfix">

    24   {% for elem_number in site.random_order | limit:60 %}

    25     {% assign element = site.elements[elem_number] %}

    26     {% include element-partial.html %}

    27   {% endfor %}

    28 </div>

    29 

    30 <script src="../{{ site.jquery_js }}"></script>

    31 <script src="../{{ site.isotope_js }}"></script>

    32 <script src="../js/fake-element.js"></script>

    33 <script>

    34 

    35   // categoryRows custom layout mode

    36   $.extend( $.Isotope.prototype, {

    37   

    38     _categoryRowsReset : function() {

    39       this.categoryRows = {

    40         x : 0,

    41         y : 0,

    42         height : 0,

    43         currentCategory : null

    44       };

    45     },

    46   

    47     _categoryRowsLayout : function( $elems ) {

    48       var instance = this,

    49           containerWidth = this.element.width(),

    50           sortBy = this.options.sortBy,

    51           props = this.categoryRows;

    52       

    53       $elems.each( function() {

    54         var $this = $(this),

    55             atomW = $this.outerWidth(true),

    56             atomH = $this.outerHeight(true),

    57             category = $.data( this, 'isotope-sort-data' )[ sortBy ],

    58             x, y;

    59       

    60         if ( category !== props.currentCategory ) {

    61           // new category, new row

    62           props.x = 0;

    63           props.height += props.currentCategory ? instance.options.categoryRows.gutter : 0;

    64           props.y = props.height;

    65           props.currentCategory = category;

    66         } else if ( props.x !== 0 && atomW + props.x > containerWidth ) {

    67           // if this element cannot fit in the current row

    68           props.x = 0;

    69           props.y = props.height;

    70         } 

    71       

    72         // position the atom

    73         instance._pushPosition( $this, props.x, props.y );

    74   

    75         props.height = Math.max( props.y + atomH, props.height );

    76         props.x += atomW;

    77   

    78       });

    79     },

    80   

    81     _categoryRowsGetContainerSize : function () {

    82       return { height : this.categoryRows.height };

    83     },

    84   

    85     _categoryRowsResizeChanged : function() {

    86       return true;

    87     }

    88   

    89   });

    90   

    91   $(function(){

    92     

    93     var $container = $('#container');

    94     

    95     {% include random-sizes.js %}

    96     

    97     $container.isotope({

    98       itemSelector : '.element',

    99       layoutMode : 'categoryRows',

   100       categoryRows : {

   101         gutter : 20

   102       },

   103       getSortData : {

   104         category : function( $elem ) {

   105           return $elem.attr('data-category');

   106         }

   107       },

   108       sortBy: 'category'

   109     });

   110 

   111     {% include option-set-buttons.js %}

   112 

   113     {% include add-buttons.js %}

   114 

   115     // toggle variable sizes of all elements

   116     $('#toggle-sizes').find('a').click(function(){

   117       $container

   118         .toggleClass('variable-sizes')

   119         .isotope('reLayout');

   120       return false;

   121     });

   122 

   123   });

   124 </script>

   125   

   126