1 ---

     2 title: Layout modes

     3 layout: default

     4 category: demos

     5 ---

     6   

     7   <section id="copy">

     8     <p>Isotope has a versatile layout engine that can accommodate multiple layout modes. Vertical layouts react to changes in browser width. Horizontal layouts react to browser height.</p>

     9     <p>See <a href="../docs/layout-modes.html">docs on layout modes</a>.</p>

    10   </section>

    11   

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

    13     

    14     {% include layout-options.html %}

    15 

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

    17   

    18   <div id="container" class="variable-sizes clearfix">

    19     {% for element in site.elements limit:20 %}

    20       {% include element-partial.html %}

    21     {% endfor %}

    22   </div> <!-- #container -->

    23   

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

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

    26   <script>

    27     $(function(){

    28       

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

    30       

    31       {% include random-sizes.js %}

    32       

    33       $container.isotope({

    34         itemSelector : '.element',

    35         masonry : {

    36           columnWidth : 120

    37         },

    38         masonryHorizontal : {

    39           rowHeight: 120

    40         },

    41         cellsByRow : {

    42           columnWidth : 240,

    43           rowHeight : 240

    44         },

    45         cellsByColumn : {

    46           columnWidth : 240,

    47           rowHeight : 240

    48         }

    49       });

    50       

    51       {% include layout-change.js %}

    52 

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

    54 

    55 

    56       

    57     });

    58   </script>

    59