日期：2012-5-2 来源：GBin1.com

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

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

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

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

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