jquery超炫的列表筛选插件

今天要为大家带来一款非常实用的jquery列表筛选插件，效果非常好。单击某项的时候动画筛选该项的列表。我们一起看下效果图：
jquery超炫的列表筛选插件
我们一起看下实现的代码：
html代码：
<div class="row">
        <div class="small-12 columns small-centered">
            <fieldset class="controls">
                <div class="row">
                    <!-- filter buttons -->
                    <div class="small-9 columns" id="controlsfilter">
                        <button class="filter tiny round active" data-filter="all">
                            全部</button>
                        <button class="filter tiny round" data-filter=".newyork">
                            诱惑</button>
                        <button class="filter tiny round" data-filter=".california">
                            清纯</button>
                        <button class="filter tiny round" data-filter=".texas">
                            明星</button>
                    </div>
                    <!-- layout buttons -->
                    <div class="small-3 columns" id="controlslayout">
                        <label>
                            Layout:</label>
                        <div class="controlslayout">
                            <input type="radio" class="grid" checked="checked" name="layout" id="grid"><label
                                id="labelgrid" for="grid"><i class="fa fa-th"></i></label><input type="radio" class="list"
                                    name="layout" id="list"><label id="labellist" for="list"><i class="fa fa-bars"></i></label></div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
    <div class="row">
        <!-- container for images -->
        <div class="small-12 columns small-centered">
            <div class="container" id="Container">
                <ul class="small-block-grid-3 medium-block-grid-4 large-block-grid-5">
                    <li class="mix newyork" style="display: inline-block;">
                        <img border="0" src="imgs/a1.jpg"></li>
                    <li class="mix newyork" style="display: inline-block;">
                        <img border="0" src="imgs/a5.jpg"></li>
                    <li class="mix california" style="display: inline-block;">
                        <img border="0" src="imgs/b1.jpg"></li>
                    <li class="mix newyork" style="display: inline-block;">
                        <img border="0" src="imgs/a4.jpg"></li>
                    <li class="mix texas" style="display: inline-block;">
                        <img border="0" src="imgs/c1.jpg"></li>
                    <li class="mix newyork" style="display: inline-block;">
                        <img border="0" src="imgs/a2.jpg"></li>
                    <li class="mix newyork" style="display: inline-block;">
                        <img border="0" src="imgs/a3.jpg"></li>
                    <li class="mix california" style="display: inline-block;">
                        <img border="0" src="imgs/b2.jpg"></li>
                    <li class="mix california" style="display: inline-block;">
                        <img border="0" src="imgs/b3.jpg"></li>
                    <li class="gap"></li>
                    <li class="gap"></li>
                </ul>
            </div>
        </div>
    </div>
View Code