jquery.quicksand задача расчета позиции

Question

Я работал над небольшим сайтом пару дней и у меня работает супер крутой плагин jquery.quicksand для сортировки записей портфолио, и у меня возникла проблема при выборе фильтра «все».

Если кому-то понадобится секунда, чтобы выручить, я был бы очень признателен.

Из-за характера проблемы было бы лучше, если бы вы ее увидели: http://demo.ivannovak.com/iocaste/portfolio.html> и щелкните фильтр «все».

Соответствующий 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 -->

Соответствующий вызов метода JS

// 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: 'swing',
      adjustHeight: 'auto'
    });

  });

});

Answer 1

Тьфу, мне нужно было определить размеры изображения внутри тега img, а не в CSS. К счастью, простое решение.