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.
 
 
 

57 lines
1.4 KiB

---
title: reLayout
layout: demo
category: demos
related: methods
---
<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>
<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 %}
// toggle variable sizes of all elements
$('#toggle-sizes a').click(function(){
$container
.toggleClass('variable-sizes')
.isotope('reLayout');
return false;
});
// change size of clicked element
$container.find('.element').live('click', function(){
$(this).toggleClass('large');
$container.isotope('reLayout');
});
$container.isotope({
itemSelector: '.element',
masonry : {
columnWidth : 120
}
});
});
</script>