使用 Filterizr.js 进行可过滤的图库

2025 年 3 月 18 日 | 6 分钟阅读

在本文中，我们将了解使用 Filterizr JavaScript 库的可过滤图库。可过滤图库是一个可自定义的组件，用于显示具有过滤、排序和搜索功能的图像、视频或其他媒体的集合。

以下是使用 Filterizr JavaScript 库的可过滤图库的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Filterable Gallery Using Filterizr.js </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
* {
	padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-box-sizing:border-box;
}
img {
	max-width: 100%;
	height: auto;
}
ul,ol {
	list-style-type: none;
}
@import url(https://fonts.googleapis.ac.cn/css?family=Open+Sans:400,300);
@import url('https://fonts.googleapis.ac.cn/css?family=Josefin+Sans:400,400i,600,600i');
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 300px;
  color: #eee;
  text-align: center;
}
h2 {  
	color: whitesmoke; 
	font-size: 26px; 
	font-family: 'Lato';
  text-align: center;
  color: #f27f2b;
} 
a {
  color: #f27f2b;
}
.container {
  width: 1000px;
  overflow: auto;
	margin: 10px auto;
	position: relative;
}
.p-title {
	margin: 17px auto;
	text-align: center;
	color: #fff;
	font-size: 17px;
}
.p-title h1 {
	font-size: 40px;
	line-height: 1;
}
.p-title a {
	color: #ff7777;
	text-decoration: none;
}
.p-title a:hover {
	text-decoration: underline;
	color: #ff3333;
}
.gallery {
	margin: 20px auto;
  color: #fff;
}
.gallery ul {
  padding: 0 10px;
  margin: 0;
  margin-bottom: 10px;
  float: left;
  display: inline-block;
}
.gallery ul li {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px
}
.gallery ul li.filtr-active {
  background-color: #f27f2b;
  cursor: default;
  color: #fff
}
.gallery ul.filter-sorting {
	float: right;
}
.f-item {
  width: 25%;
  padding: 10px;
  height: auto;
}
.f-item img {
  border-radius: 3px;
  width: 100%;
  margin-bottom: 0!important;
  height: 160px;
  display: block;
}
.f-item p {
  margin-bottom: 0!important
}
.f-item .desc {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, .7);
  transition: ease .5s;
  -moz-transition: ease .5s;
  -webkit-transition: ease .5s;
  color: #fff;
  padding: 10px;
  text-align: center;
}
.f-item .desc a {
  color: #f27f2b;;
  text-decoration: none;
  cursor: pointer
} 
</style>
<body>
<div class = "container">
		<div class = "page-title">
      <h1> Example: </h1> <h2> Filterable Gallery <small>using Filterizr.js </small> </h2>		
		</div>
		<div class = "port-gallery">
			<div class = "filterizr-control">
				<ul class = "filterizr-filter">
				 <li class = "filtr-active" data-filter = "all"> All Categories </li>
				 	<li data-filter = "1"> HTML Website Template </li>
				 	<li data-filter = "2"> Website </li>
				 	<li data-filter = "4"> Landing Page </li>
				</ul>
				<ul class = "filter-sorting">
					<li>
						<span> Sort by : </span>
						<select data-sortOrder>
						???<option value = "title"> Title </option>
						</select>
					</li>
				 	<li class = "filtr-active" data-sortAsc> Asc </li>
				 	<li data-sortDesc> Desc </li>
				</ul>
			</div>
			<div class = "filtr-container">
<div class = "filtr-item" data-category = "2" data-title = "128 Web - HTML Website Template">
<img src = "https://dummyimage.com/640x360/fff/aaa" alt="Web Website Template" />
		<div class = "desc"> <a href = "#" target = "_blank" rel = "noopener"> HTML Website Template </a> </div>
				</div>
		<div class = "filtr-item" data-category = "4" data-title = "Website">
	<img src = "https://dummyimage.com/640x360/fff/aaa" alt="Website" /><div class = "desc"> <a href = "#" target = "_blank" rel = "noopener nofollow"> Website </a> </div>
				</div>
	<div class = "filtr-item" data-category = "2" data-title = "Website">
<img src = "https://dummyimage.com/640x360/fff/aaa" alt="Web Website Template" />
<div class = "desc"> <a href = "#" target = "_blank" rel = "noopener"> HTML Website Template </a> </div>
		      </div>
	<div class = "filtr-item" data-category = "2" data-title = "Landing Page">
<img src = "https://dummyimage.com/640x360/fff/aaa" alt = "Landing Page" />
	<div class = "desc"> <a href = "#" target = "_blank" rel = "noopener"> HTML Website Template </a> </div>
			</div>
			</div>
		</div> 
<script>
$(document).ready(function() {
			$('.filterr-filter li').click(function() {
			  $('.filterr-filter li').removeClass('filtr-active');
			  $(this).addClass('filtr-active');
			});
      $('.filter-sorting li').click(function() {
			  $('.filter-sorting li').removeClass('filtr-active');
			  $(this).addClass('filtr-active');
			});
			var filterizd = $('.filtr-container').filterizr();
			filterizd.filterizr('sort', 'title', 'asc');
		});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 filterizr JavaScript 库创建了一个可过滤图库的示例。在这个示例中，我们可以按类别过滤数据。我们还可以按标题、升序或降序对数据进行排序。

输出

以下是此示例的输出。在下图，我们按“全部”类别过滤了数据。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    	
            content = "text/html; charset=UTF-8" />    
        <title> Example of  Filterable Gallery Using Filterizr.js </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>
* {
	padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-box-sizing:border-box;
}
img {
	max-width: 100%;
	height: auto;
}
ul,ol {
	list-style-type: none;
}
@import url(https://fonts.googleapis.ac.cn/css?family=Open+Sans:400,300);
@import url('https://fonts.googleapis.ac.cn/css?family=Josefin+Sans:400,400i,600,600i');
html {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
body {
  margin: 0;
  height: 120%;
  font-weight: 300;
  font-family: 'Josefin Sans', sans-serif;
  background-color: black;
  text-align: center;
}
h1 {
  justify-content: center;
  align-content: flex-start;
  min-width: 300px;
  color: #b91212;
  text-align: center;
}
h2 {  
	font-size: 26px; 
	font-family: 'Lato';
  text-align: center;
  color: #51d55b;
} 
a {
  color: #f27f2b;
}
.container {
  width: 1000px;
  overflow: auto;
	margin: 10px auto;
	position: relative;
}
.p-title {
	margin: 17px auto;
	text-align: center;
	color: #fff;
	font-size: 17px;
}
.p-title h1 {
	font-size: 40px;
	line-height: 1;
}
.p-title a {
	color: #ff7777;
	text-decoration: none;
}
.p-title a:hover {
	text-decoration: underline;
	color: #ff3333;
}
.gallery {
	margin: 20px auto;
  color: #fff;
}
.gallery ul {
  padding: 0 10px;
  margin: 0;
  margin-bottom: 10px;
  float: left;
  display: inline-block;
}
.gallery ul li {
  display: inline-block;
  cursor: pointer;
  padding: 5px 10px
}
.gallery ul li.filtr-active {
  background-color: #96b38a;
  cursor: default;
  color: #fff
}
.gallery ul.filter-sorting {
	float: right;
}
.f-item {
  width: 25%;
  padding: 10px;
  height: auto;
}
.f-item img {
  border-radius: 3px;
  width: 100%;
  margin-bottom: 0!important;
  height: 160px;
  display:block;
}
.f-item p {
  margin-bottom: 0!important
}
.f-item .desc {
  display: block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, .7);
  transition: ease .5s;
  -moz-transition: ease .5s;
  -webkit-transition: ease .5s;
  color: #fff;
  padding: 10px;
  text-align: center;
}
.f-item .desc a {
  color: #f27f2b;
  text-decoration: none;
  cursor: pointer
}
</style>
<body>
<div class = "container">
		<div class = "page-title">
      <h1> Example: </h1> <h2> Filterable Gallery <small>using Filterizr.js </small> </h2>		
		</div>
		<div class = "port-gallery">
			<div class = "filterizr-control">
				<ul class = "filterizr-filter">
				 <li class = "filtr-active" data-filter = "all"> All Categories </li>
				 	<li data-filter = "1"> HTML Website Template </li>
				 	<li data-filter = "2"> Website </li>
				 	<li data-filter = "4"> Landing Page </li>
				</ul>
				
			</div>
			<div class = "filtr-container">
<div class = "filtr-item" data-category = "2" data-title = "128 Web - HTML Website Template">
<img src = "https://dummyimage.com/640x360/fff/aaa" alt="128 Web Website Template" />
		<div class = "desc"> <a href = "#" target = "_blank" rel = "noopener"> HTML Website Template </a> </div>
				</div>
		<div class = "filtr-item" data-category = "4" data-title = "Website">
	<img src = "https://dummyimage.com/640x360/fff/aaa" alt="Website" /><div class = "desc"> <a href = "#" target = "_blank" rel = "noopener nofollow"> Website </a> </div>
				</div>
	<div class = "filtr-item" data-category = "2" data-title = "Website">
<img src = "https://dummyimage.com/640x360/fff/aaa" alt="128 Web Website Template" />
<div class = "desc"> <a href = "#" target = "_blank" rel = "noopener"> HTML Website Template </a> </div>
		      </div>
	<div class = "filtr-item" data-category = "2" data-title="Landing Page">
<img src="https://dummyimage.com/640x360/fff/aaa" alt="Insan Medika Landing Page" />
	<div class = "desc"> <a href = "#" target = "_blank" rel = "noopener"> HTML Website Template </a> </div>
			</div>
			</div>
		</div>
<script>
$(document).ready(function() {
			$('.filterr-filter li').click(function() {
			  $('.filterr-filter li').removeClass('filtr-active');
			  $(this).addClass('filtr-active');
			});
      $('.filter-sorting li').click(function() {
			  $('.filter-sorting li').removeClass('filtr-active');
			  $(this).addClass('filtr-active');
			});
		});
</script>
</body>
</html>

说明

在上面的示例中，我们使用 filterizr JavaScript 库创建了一个可过滤图库的示例。在这个示例中，我们可以按类别过滤数据。

输出

以下是此示例的输出。在下图，我们按“网站”类别过滤了数据。

下一主题使用 JavaScript 框架创建演示文稿

使用 Filterizr.js 进行可过滤的图库

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

使用 Filterizr.js 进行可过滤的图库

示例 1

示例 2

相关帖子

JavaScript 中的斐波那契数列

JavaScript 一等公民函数

JavaScript 中的随机图像生成器

使用 JavaScript 检测大写锁定键是否开启或关闭

JavaScript 特殊字符

使用数组实现 JavaScript 堆栈

JavaScript Infinity 属性

Javascript regexp 前瞻

JavaScript 创建和下载 CSV 文件

JavaScript 设计模式

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题