jQuery图片筛选过滤器插件

jQuery图片筛选过滤器插件

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.filterizr.min.js"></script>
<script src="js/controls.js"></script>

3. HTML代码

<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>Shuffle</li>
			<!-- Basic sort controls consisting of asc/desc button and a select -->
			<li class="sort-btn active" data-sortAsc>Asc</li>
			<li class="sort-btn" data-sortDesc>Desc</li>
			<select data-sortOrder>
				<option value="domIndex">
					Position
				</option>
				<option value="sortData">
					Description
				</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">Busy Streets</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">Luminous night</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">city wonders</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">in production</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">industrial site</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">peaceful lake</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">city lights</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">dreamhouse</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">restless machines</span>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function() {
	$('.filtr-container').filterizr();
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到