---
title: Adding items
layout: demo
category: demos
---

<section id="copy">
  <p>Use the <code>reLayout</code> method to easily arrange item elements after a change.</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>