所以我试图将同位素设置为我的投资组合分拣机.. 在这里,我使用数据过滤器设置了过滤器。
<div class="filter clear">
<ul>
<li><a href="#" class="selected" data-filter="*">All</a></li>
<li><a data-filter=".web">Web Design</a></li>
<li><a data-filter=".ill">Ilustration</a></li>
<li><a data-filter=".logo">Logo</a></li>
<li><a data-filter=".video">Video</a></li>
<li><a data-filter=".print">Print Design</a></li>
</ul>
</div>
这是我的投资组合结构。
<div class="portfolio">
<figure class="entry web">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry ill">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry logo">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry video">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
<figure class="entry print">
<img src="img/portfolio-image.jpg">
<span class="hover">
<a href="#">VIEW PROJECT</a>
</span>
</figure>
</div>
</div>
这是我的Jquery实施同位素。
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolio');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('nav.filter ul a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
var $optionSets = $('nav.filter ul'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('nav.filter ul');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
任何人都可以在发现错误时给我一些帮助......
当我点击链接进行排序时,它只跟随href并且不排序......