jquery.quicksand position calculation problem

I've been working on a little site for a couple days and have a the super cool jquery.quicksand plugin running to sort through portfolio entries and I'm having a problem when selecting the 'all' filter.

If someone would take a second to help out, I'd be very grateful.

Due to the nature of the problem, it'd be best for you to see it: http://demo.ivannovak.com/iocaste/portfolio.html > and click the 'all' filter.

Relevant HTML:

            <div id="filter" class="grid_12 clearfix">
                <h4 class="fl">Filter &raquo;</h4>


                <ul class="fl type">
                    <li title="all">All</li>
                    <li title="print">Print</li>
                    <li title="logo">Logo</li>
                    <li title="web">Websites</li>
                </ul>
            </div>

            <div class="clearfix"></div>

            <div id="portfolio">
                <div data-type="web" data-id="1" class="grid_4">
                    <a href="assets/img/portfolio/moo02.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo02.jpg" alt="image1"></a>
                    <p>small caption</p>
                </div>
                <div data-type="print" data-id="2" class="grid_4">
                    <a href="assets/img/portfolio/moo04.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo04.jpg" alt="image2"></a>
                    <p>small caption</p>
                </div>
                <div data-type="logo" data-id="3" class="grid_4">
                    <a href="assets/img/portfolio/moo11.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo11.jpg" alt="image3"></a>
                    <p>small caption</p>
                </div>
                <div data-type="logo" data-id="4" class="grid_4">
                    <a href="assets/img/portfolio/moo13.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo13.jpg" alt="image4"></a>
                    <p>small caption</p>
                </div>
                <div data-type="print" data-id="5" class="grid_4">
                    <a href="assets/img/portfolio/moo02.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo02.jpg" alt="image1"></a>
                    <p>small caption</p>
                </div>
                <div data-type="print" data-id="6" class="grid_4">
                    <a href="assets/img/portfolio/moo04.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo04.jpg" alt="image2"></a>
                    <p>small caption</p>
                </div>                  
                <div data-type="web" data-id="7" class="grid_4">
                    <a href="assets/img/portfolio/moo11.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo11.jpg" alt="image3"></a>
                    <p>small caption</p>
                </div>
                <div data-type="web" data-id="8" class="grid_4">
                    <a href="assets/img/portfolio/moo13.jpg" rel="prettyPhoto"><img src="assets/img/portfolio/moo13.jpg" alt="image4"></a>
                    <p>small caption</p>
                </div>
            </div><!-- .portfolio -->

Relevant JS Method Call

// DOMContentLoaded
$(function() {

  // bind radiobuttons in the form
  var $filterPortfolio = $('#filter li');

  // get the first collection
  var $portfolio = $('#portfolio');

  // clone applications to get a second collection
  var $data = $portfolio.clone();

  // attempt to call Quicksand on every form change
  $filterPortfolio.click(function(e) {

    if ($(this).attr('title') == 'all') {
      var $filteredData = $data.find('div.grid_4');
    } else {
      var $filteredData = $data.find('.grid_4[data-type=' + $(this).attr('title') + ']');
    }

    // finally, call quicksand
    $portfolio.quicksand($filteredData, {
      duration: 800,
      easing:开发者_JS百科 'swing',
      adjustHeight: 'auto'
    });

  });

});

Ugh, I needed to define image dimensions within the img tag rather than in the CSS. Simple solution, thankfully.