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.

68 lines
1.6 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>
var $container = $('#container');
// 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');
});
$(function(){
// hacky way of adding random size classes
$container.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
if ( Math.random() > 0.6 ) {
$(this).addClass('height2');
}
});
$container.isotope({
itemSelector: '.element',
masonry : {
columnWidth : 120
}
});
});
</script>