2010-06-29 80 views
0

我一直在一個小網站上工作了幾天,並有一個超酷的jquery.quicksand插件運行通過組合條目進行排序,我在選擇'all '過濾器。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' 
    }); 

    }); 

}); 

回答

0

唉,我需要的img標籤內,而不是在CSS定義圖像尺寸。簡單的解決方案,幸好。