使用Isotope作为投资组合分类器

时间:2013-07-25 16:39:22

标签: html css jquery-isotope portfolio

所以我试图将同位素设置为我的投资组合分拣机.. 在这里,我使用数据过滤器设置了过滤器。

<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并且不排序......

0 个答案:

没有答案