1 ---

     2 title: reLayout

     3 layout: default

     4 category: demos

     5 ---

     6   

     7   <section id="copy">

     8     <p>Use the <a href="../docs/methods.html#relayout"><code>reLayout</code> method</a> to easily arrange item elements after a change.</p>

     9     <p>Click on any item element to change its size.</p>

    10   </section>

    11   

    12   <section id="options">

    13     <ul class="clearfix">

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

    15     </ul>

    16   </section>

    17   

    18   <div id="container" class="clickable 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       });

    39       

    40       {% include change-sizes.js %}

    41       

    42     });

    43   </script>

    44