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 中定义图像尺寸。谢天谢地，简单的解决方案。