使用jQuery插件filtrify实现的超酷动态标签分类摩托车新款展示

   

大家在开发过程中往往需要有效的展示不同类别下的图片或者文字内容，这个过程中你可能需要使用不同的标签来过滤不同类别下的图片内容，或者提供给用户一个方便的方式来选择不同的列别。今天我们这里将使用jQuery插件 - 来快速精致的实现一个超酷的摩托车分类展示应用，大家可以看到使用filtrify来使用标签分类显示图片是多么的简单，而且使用isotype来生成动画展示特效，希望大家喜欢！

这个插件使用了很多伪类，例如:after和:before，如果你不熟悉它，可以看看，希望对大家有帮助！

注意IE8需要指定!DOCTYPE来支持伪类:after和before中的"content“属性，同时如果你需要支持IE7，你可以考虑使用。

HTML代码

在HTML代码中，我们使用HTML5的data属性来定义类别，如下：

    
• Hypermotard 796 SilverDucati
      
• Hypermotard 796 RedDucati
      
• Hypermotard 1100 Evo RedDucati
      
• Streetfighter 848Ducati
      
• Diavel CarbonDucati
      
• BMW K1300S HPBMW
      
• 2012 BMW G650GSBMW
      
• Tre-K 1130 AmazonasBeneli
      
• 2012 KTM 1190 RC8RKTM
      
• 012 KTM 990 Duke RKTM
      
• DB10B MotardBimota
      
• DB10B MotardYamaha
      
• VMAX / VMX17Yamaha
      
• Honda CBR1000RRHonda
      
• HayabusaSuzuki
      
• V-Strom 1000 SESuzuki
      
• Ninja ZX-14RKawasaki
      
• XL883N Iron 883Harley Davidson
  

CSS

这里我们使用filterify的缺省css，并且添加isotope的css样式定制，如果你没有使用过isotope，请查看，样式代码如下：

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}Javascript代码$(function() {
    
    var container = $("#container");
    
    container.isotope({
        itemSelector : 'ul#container > li',
        layoutMode : 'fitRows'
    });
    
    $.filtrify("container", "placeHolder", {
        hide     : false,
        callback : function ( query, match, mismatch ) {
            container.isotope({ filter : $(match) });
        }
    });

});

javascript代码非常简单，只需要在filtrify的callback方法中调用isotope即可。是不是非常简单。

希望大家喜欢这个超酷的内容过滤插件。如果你有任何问题和建议请给我们留言，谢谢！

来源：