jquery分類圖片過濾器插件代碼



150 596 199



特效描述:jquery 分類圖片 過濾器插件,jquery圖片過濾器,支持分類、標題搜索、排序、移動效果等圖片過濾方式。一款比較實用的圖片過濾插件下載

代碼結構

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 文本框 text文本框 下拉框 select下拉菜單 select美化 select美化框 選項卡自動切換 搜索框 篩選 篩選器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子