jquery和CSS3图片分类排序过滤搜索插件

查看演示 下载资源 下载积分： 40 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的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">
			排序 &amp; 移动 控制：
			<!-- 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>