一款jquery和CSS3图片分类排序过滤搜索插件,可以点击不同的预设类别来显示不同的图片,排序也有3种不同的排序效果,可同时配合下拉框里的选项来操作,也可以通过关键字或词来搜索想要的图片,功能丰富且自由度比较高,喜欢的童鞋请收下吧。
页面的head部分,先远程调用一个CSS样式文件bootstrap.min.css,接着引入两个本地样式文件,代码如下:
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/demo.css">
<link type="text/css" rel="stylesheet" href="css/index.css">
页面的body部分,对照演示的布局不难读懂下面的结构,代码如下:
<div class="container" style="background: #fff;padding: 2em;">
<!-- Filter Controls - Simple Mode -->
<div class="row">
<!-- A basic setup of simple mode filter controls, all you have to do is use data-filter="all"
for an unfiltered gallery and then the values of your categories to filter between them -->
<ul class="simplefilter">
简单过滤器控件:
<li class="active" data-filter="all">全部</li>
<li data-filter="1">城市</li>
<li data-filter="2">乡村</li>
<li data-filter="3">工业</li>
<li data-filter="4">日光</li>
<li data-filter="5">夜景</li>
</ul>
</div>
<!-- Filter Controls - Multifilter Mode -->
<div class="row">
<!-- A basic setup of multifilter controls, when the user toggles a category
the corresponding items are rendered or hidden -->
<ul class="multifilter">
滤波器控制:
<li data-multifilter="1">城市</li>
<li data-multifilter="2">乡村</li>
<li data-multifilter="3">工业</li>
</ul>
</div>
<!-- Shuffle & Sort Controls -->
<div class="row">
<ul class="sortandshuffle">
排序 & 移动 控制:
<!-- Basic shuffle control -->
<li class="shuffle-btn" data-shuffle>洗牌</li>
<!-- Basic sort controls consisting of asc/desc button and a select -->
<li class="sort-btn active" data-sortAsc>正序</li>
<li class="sort-btn" data-sortDesc>倒序</li>
<select data-sortOrder>
<option value="domIndex">位置</option>
<option value="sortData">描述</option>
</select>
</ul>
</div>
<!-- Search control -->
<div class="row search-row">
关键字搜索:
<input type="text" class="filtr-search" name="filtr-search" data-search>
</div>
<div class="row">
<!-- This is the set up of a basic gallery, your items must have the categories they belong to in a data-category
attribute, which starts from the value 1 and goes up from there -->
<div class="filtr-container">
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort="Busy streets">
<img class="img-responsive" src="img/city_1.jpg" alt="sample image">
<span class="item-desc">闹市街头</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 5" data-sort="Luminous night">
<img class="img-responsive" src="img/nature_2.jpg" alt="sample image">
<span class="item-desc">夜之辉煌</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 4" data-sort="City wonders">
<img class="img-responsive" src="img/city_3.jpg" alt="sample image">
<span class="item-desc">城市奇观</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3" data-sort="In production">
<img class="img-responsive" src="img/industrial_1.jpg" alt="sample image">
<span class="item-desc">生成过程</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3, 4" data-sort="Industrial site">
<img class="img-responsive" src="img/industrial_2.jpg" alt="sample image">
<span class="item-desc">工业现场</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 4" data-sort="Peaceful lake">
<img class="img-responsive" src="img/nature_1.jpg" alt="sample image">
<span class="item-desc">宁静之湖</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="1, 5" data-sort="City lights">
<img class="img-responsive" src="img/city_2.jpg" alt="sample image">
<span class="item-desc">城市灯光</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="2, 4" data-sort="Dreamhouse">
<img class="img-responsive" src="img/nature_3.jpg" alt="sample image">
<span class="item-desc">梦之小屋</span>
</div>
<div class="col-xs-6 col-sm-4 col-md-3 filtr-item" data-category="3" data-sort="Restless machines">
<img class="img-responsive" src="img/industrial_3.jpg" alt="sample image">
<span class="item-desc">无休机器</span>
</div>
</div>
</div>
</div>
页面的底部,先引入jQuery库,接着引入过滤和控制插件,并启用插件,代码如下:
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.filterizr.min.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<script type="text/javascript">
$(function() {
$('.filtr-container').filterizr();
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791