夜雨聆风源码获取
私信回复图片筛选获取完整源码
演示效果
html 文件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片筛选过滤器效果</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.8/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">·
</head>
<body>
<div class="container" style="background: #fff;padding: 2em;">
<div class="row">
<ul class="simplefilter" id="simpleFilter">
简单过滤器控件：
</ul>
</div>
<!-- 筛选控件 - 多选模式 -->
<div class="row">
<!-- 多选筛选控件的基本设置，当用户切换类别时，相应的项目会显示或隐藏 -->
<ul class="multifilter" id="multiFilter">
滤波器控制：
</ul>
</div>
<!-- 随机排序和排序控件 -->
<div class="row">
<ul class="sortandshuffle">
排序 & 移动 控制:
<!-- 基本随机排序控件 -->
<li class="shuffle-btn" data-shuffle>Shuffle</li>
<!-- 基本排序控件，包含升序/降序按钮和选择框 -->
<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>
<!-- 搜索控件 -->
<div class="row search-row">
关键字搜索：
<input type="text" class="filtr-search" name="filtr-search" data-search>
</div>
<div class="row">
<div class="filtr-container" id="filtrContainer">
<!-- 加载占位符 -->
<div class="loading-overlay" id="loadingOverlay">
<div class="spinner"></div>
<p>加载中...</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/filterizr/2.2.4/jquery.filterizr.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
css 文件
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #494a5f;
font-family:
"Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
}
.filtr-item {
padding: 1rem;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
cursor: pointer;
}
.filtr-item:hover {
transform: translateY(-8px) scale(1.02);
/* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); */
}
.filtr-item img {
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
}
.filtr-item:hover img {
transform: scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.item-desc {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
color: white;
position: absolute;
text-transform: uppercase;
text-align: center;
padding: 1.2rem 1rem;
z-index: 1;
bottom: 1rem;
left: 1rem;
right: 1rem;
border-radius: 0 0 8px 8px;
opacity: 0.9;
transition:
opacity 0.3s ease,
background 0.3s ease;
font-size: 0.9rem;
letter-spacing: 1px;
}
.filtr-item:hover .item-desc {
opacity: 1;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
}
/* 筛选控件 */
.simplefilter li,
.multifilter li,
.sortandshuffle li {
color: white;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
padding: 0.8rem 1.8rem;
border-radius: 25px;
transition: all 0.3s ease;
margin: 0.3rem;
font-size: 0.9rem;
letter-spacing: 1px;
}
.simplefilter li {
background-color: #585858;
}
.simplefilter li:hover {
background-color: #6a6a6a;
transform: translateY(-2px);
}
.simplefilter li.active {
background-color: #212121;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.multifilter li {
background-color: #4b9eff;
}
.multifilter li:hover {
background-color: #6bb5ff;
transform: translateY(-2px);
}
.multifilter li.active {
background-color: #2265b4;
box-shadow: 0 4px 15px rgba(0, 34, 100, 0.3);
}
/* 随机排序和排序控件 */
select {
padding: 0.8rem 1rem;
text-transform: uppercase;
border: none;
border-radius: 8px;
background-color: #3a3a3a;
color: white;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.3s ease;
outline: none;
}
select:hover {
background-color: #4a4a4a;
}
select:focus {
box-shadow: 0 0 0 3px rgba(75, 158, 255, 0.3);
}
option {
background-color: #3a3a3a;
color: white;
}
.sortandshuffle .shuffle-btn {
background-color: #dec800;
color: #333;
}
.sortandshuffle .shuffle-btn:hover {
background-color: #f5d700;
transform: translateY(-2px);
}
.sortandshuffle .sort-btn {
background-color: #de0000;
}
.sortandshuffle .sort-btn:hover {
background-color: #e83333;
transform: translateY(-2px);
}
.sortandshuffle .sort-btn.active {
background-color: #9d0000;
box-shadow: 0 4px 15px rgba(157, 0, 0, 0.3);
}
/* 搜索控件 */
.search-row {
margin-left: 2.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.filtr-search {
padding: 0.8rem 1.2rem;
text-transform: uppercase;
border: 2px solid #ddd;
border-radius: 25px;
background-color: #f8f8f8;
font-size: 0.9rem;
width: 200px;
transition: all 0.3s ease;
outline: none;
}
.filtr-search:focus {
border-color: #4b9eff;
background-color: white;
box-shadow: 0 0 0 3px rgba(75, 158, 255, 0.2);
width: 250px;
}
.filtr-search::placeholder {
color: #999;
}
/* 容器样式 */
.filtr-container {
position: relative;
min-height: 400px;
}
/* 加载状态样式 */
.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
transition: opacity 0.3s ease;
}
.loading-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.spinner {
width: 50px;
height: 50px;
border-width: 4px;
border-style: solid;
border-color: #e0e0e0;
border-top-color: #4b9eff;
border-radius: 50%;
animation: spin 1s linear infinite;
-webkit-animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-overlay p {
margin-top: 1rem;
color: #666;
font-size: 1rem;
}
js 文件
var filterCategories = [
{ id: '1', name: '城市' },
{ id: '2', name: '乡村' },
{ id: '3', name: '工业' },
{ id: '4', name: '日光' },
{ id: '5', name: '夜景' }
];
var multiFilterCategories = [
{ id: '1', name: '城市' },
{ id: '2', name: '乡村' },
{ id: '3', name: '工业' }
];
var imagesData = [
{ category: '1, 5', sort: 'Busy streets', desc: 'Busy Streets' },
{ category: '2, 5', sort: 'Luminous night', desc: 'Luminous night' },
{ category: '1, 4', sort: 'City wonders', desc: 'city wonders' },
{ category: '3', sort: 'In production', desc: 'in production' },
{ category: '3, 4', sort: 'Industrial site', desc: 'industrial site' },
{ category: '2, 4', sort: 'Peaceful lake', desc: 'peaceful lake' },
{ category: '1, 5', sort: 'City lights', desc: 'city lights' },
{ category: '2, 4', sort: 'Dreamhouse', desc: 'dreamhouse' },
{ category: '3', sort: 'Restless machines', desc: 'restless machines' }
];
function renderSimpleFilter() {
var container = document.getElementById('simpleFilter');
var allLi = document.createElement('li');
allLi.className = 'active';
allLi.setAttribute('data-filter', 'all');
allLi.textContent = '全部';
container.appendChild(allLi);
filterCategories.forEach(function (item) {
var li = document.createElement('li');
li.setAttribute('data-filter', item.id);
li.textContent = item.name;
container.appendChild(li);
});
}
function renderMultiFilter() {
var container = document.getElementById('multiFilter');
multiFilterCategories.forEach(function (item) {
var li = document.createElement('li');
li.setAttribute('data-multifilter', item.id);
li.textContent = item.name;
container.appendChild(li);
});
}
function renderImages() {
var container = document.getElementById('filtrContainer');
var loadingOverlay = document.getElementById('loadingOverlay');
var loadedCount = 0;
var totalCount = imagesData.length;
imagesData.forEach(function (item, index) {
var div = document.createElement('div');
div.className = 'col-xs-6 col-sm-4 col-md-3 filtr-item';
div.setAttribute('data-category', item.category);
div.setAttribute('data-sort', item.sort);
var img = document.createElement('img');
img.className = 'img-responsive';
img.src = 'https://picsum.photos/300/200?random=' + (index + 1);
img.alt = 'sample image';
img.onload = function () {
loadedCount++;
if (loadedCount === totalCount) {
loadingOverlay.classList.add('hidden');
}
};
var span = document.createElement('span');
span.className = 'item-desc';
span.textContent = item.desc;
div.appendChild(img);
div.appendChild(span);
container.appendChild(div);
});
}
$(function () {
renderSimpleFilter();
renderMultiFilter();
renderImages();
$('.filtr-container').filterizr();
//简单筛选控件
$('.simplefilter li').click(function () {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
//多选筛选控件
$('.multifilter li').click(function () {
$(this).toggleClass('active');
});
//随机排序控件
$('.shuffle-btn').click(function () {
$('.sort-btn').removeClass('active');
});
//排序控件
$('.sort-btn').click(function () {
$('.sort-btn').removeClass('active');
$(this).addClass('active');
});
});