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.

52 lines
1.4 KiB

---
title: Adding items
layout: demo
category: demos
related: methods
---
<section id="copy">
<p>The <code>insert</code> method will append, add items to the widget, filter, sort, and then layout all items</p>
<p>The <code>appended</code> method adds items to the widget, and then lays out only the new items.</p>
</section>
<section id="options">
<ul class="floated clearfix">
<li id="insert"><a href="#insert">Insert new elements</a></li>
<li id="append"><a href='#append'>Append new elements</a></li>
</ul>
</section>
<div id="demo" class="iso-container">
{% for element in site.elements_best_of limit:10 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script>
<script src="../src/jquery.opto-transform.js"></script>
<script src="../src/jquery.smartresize.js"></script>
<script src="../src/jquery.isotope.js"></script>
<script src="../src/jquery.ui.widget.js"></script>
<script src="../js/fake-element.js"></script>
<script>
$(function(){
var $demo = $('#demo');
$demo.isotope({
itemSelector : '.element',
getSortData : {
symbol : function( $elem ) {
return $elem.attr('data-symbol');
}
},
sortBy : 'symbol'
});
{% include add-buttons.js %}
});
</script>