Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

45 lines
1.0 KiB

---
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>