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 »</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'
});
});
});