enmi12/glossaire/_posts/demos/2010-12-31-relayout.html
changeset 0 d970ebf37754
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/demos/2010-12-31-relayout.html	Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,44 @@
+---
+title: reLayout
+layout: default
+category: demos
+---
+  
+  <section id="copy">
+    <p>Use the <a href="../docs/methods.html#relayout"><code>reLayout</code> method</a> to easily arrange item elements after a change.</p>
+    <p>Click on any item element to change its size.</p>
+  </section>
+  
+  <section id="options">
+    <ul class="clearfix">
+      <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>
+    </ul>
+  </section>
+  
+  <div id="container" class="clickable clearfix">
+    {% for element in site.elements limit:20 %}
+      {% include element-partial.html %}
+    {% endfor %}
+  </div> <!-- #container -->
+  
+  <script src="../{{ site.jquery_js }}"></script>
+  <script src="../{{ site.isotope_js }}"></script>
+  <script>
+    $(function(){
+      
+      var $container = $('#container');
+      
+      {% include random-sizes.js %}
+      
+      $container.isotope({
+        itemSelector: '.element',
+        masonry : {
+          columnWidth : 120
+        }
+      });
+      
+      {% include change-sizes.js %}
+      
+    });
+  </script>
+