js+css实现照片墙相册筛选效果代码
代码语言：html
所属分类：画廊相册
代码描述：js+css实现照片墙相册筛选效果代码，通过js的array.filter实现。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Encode+Sans+Expanded:wght@400;700;800&display=swap" rel="stylesheet">
<style>
:root {
--main-bg: #1d1e22;
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
}
body {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
min-height: 100vh;
font-family: "Encode Sans Expanded", sans-serif;
color: #ffffff;
background-color: var(--main-bg);
}
.toggles {
position: fixed;
inset-block-start: 50%;
inset-inline-end: 1rem;
transform: translateY(-50%);
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
gap: 1rem;
z-index: 10;
}
.toggles__label {
cursor: pointer;
}
.toggles__text {
position: relative;
display: block;
padding-inline-start: 2.5rem;
font-weight: 700;
font-size: 1.5rem;
}
.toggles__text::before,
.toggles__text::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
transform: translateY(-50%);
display: block;
width: 2rem;
height: 2rem;
}
.toggles__text::before {
background-color: #ffffff;
border-radius: 2px;
}
.toggles__text::after {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256' xml:space='preserve'%3E%3Cg style='stroke:none;stroke-width:0;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:none;fill-rule:nonzero;opacity:1'%3E%3Cpath d='M42.526 90c-.17-.787-.492-1.637-.763-2.635-.135-.478-.242-1.029-.353-1.463l-.343-1.256c-.242-.833-.426-1.676-.712-2.492l-.816-2.451c-1.199-3.224-2.591-6.349-4.24-9.333-3.351-5.947-7.514-11.367-12.138-16.467a485.752 485.752 0 0 0-7.097-7.617c-2.413-2.544-4.865-5.11-7.126-7.992-.572-.705-1.098-1.49-1.647-2.232-.516-.797-1.037-1.571-1.491-2.432a19.88 19.88 0 0 1-2.153-5.601c-.441-2.054-.254-4.31.356-6.311.572-2.067 1.784-3.708 2.949-5.255l.036-.048c.03-.04.066-.08.1-.113 1.704-1.636 3.596-3.112 5.693-4.286a18.774 18.774 0 0 1 6.845-2.3c2.426-.237 4.91.06 7.131.948 2.229.871 4.203 2.208 5.919 3.749 3.44 3.108 5.996 6.928 8.178 10.873 2.164 3.965 1.737 2.66 3.34 6.864.076-4.691.212-3.624 1.289-8.289 1.096-4.648 2.796-9.273 5.597-13.418a26.8 26.8 0 0 1 5.077-5.64c1.982-1.654 4.3-3.019 6.86-3.836 2.545-.838 5.304-1.154 7.978-.859 2.678.271 5.26 1.067 7.598 2.218l.042.021c.125.062.251.142.358.224 1.837 1.426 3.722 2.947 5.086 5.13l.532.785c.152.281.285.577.426.867.259.59.585 1.157.768 1.776l.514 1.874c.142.628.161 1.264.236 1.898a19.667 19.667 0 0 1-.865 7.162c-.631 2.238-1.559 4.249-2.511 6.221-2.008 3.863-4.35 7.369-6.783 10.748-2.417 3.39-4.981 6.614-7.488 9.849-5.03 6.458-10.094 12.803-14.62 19.51a175.578 175.578 0 0 0-3.317 5.08c-1.037 1.732-2.077 3.469-3.04 5.248-.509.878-.953 1.785-1.404 2.692-.452.907-.93 1.805-1.325 2.738l-.626 1.389c-.21.46-.411.908-.645 1.496-.465 1.128-1.052 2.096-1.405 2.966z' style='stroke:none;stroke-width:1;stroke-dasharray:none;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;fill:%23e00000;fill-rule:nonzero;opacity:1' transform='matrix(2.81 0 0 2.81 1.407 1.407)'/%3E%3C/g%3E%3C/svg%3E%0A")
center / auto 70% no-repeat;
transition: all 0.3s ease-in-out;
opacity: 0;
}
.toggles__input:checked + .toggles__text::after {
opacity: 1;
}
.images {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
aspect-ratio: 1 / 1;
list-style: none;
}
.images__item {
filter: grayscale(100%);
aspect-ratio: 1 / 1;
overflow: hidden;
transition: all 0.3s ease-in-out;
img {
object-position: center;
object-fit: cover;
filter: blur(5px);
transition: all 0.3s ease-in-out;
}
&.active {
filter: none;
img {
filter: none;
}
}
}
@media (max-width: 768px) {
html {
font-size: 10px;
}
.images {
height: min(360px, 100vh - 30px);
gap: .5rem;
}
}
</style>
</head>
<body translate="no">
<form class="toggles" action="#">
<label class="toggles__label" for="red">
<input class="toggles__input visually-hidden" id="red" type="checkbox" name="red" checked>
<span class="toggles__text">R</span>
</label>
<label class="toggles__label" for="green">
<input class="toggles__input visually-hidden" id="green" type="checkbox" name="green">
<span class="toggles__text">G</span>
</label>
<label class="toggles__label" for="blue">
<input class="toggles__input visually-hidden" id="blue" type="checkbox" name="blue">
<span class="toggles__text">B</span>
</label>
</form>
<ul class="images">
<li class="images__item active" data-color="red">
<img src="https://images.unsplash.com/photo-1600703136783-bdb5ea365239?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8cmVkfHx8fHx8MTcxNjM4OTA5Mw&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item active" data-color="red">
<img src="https://images.unsplash.com/photo-1546803073-23568b8c98e6?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8cmVkfHx8fHx8MTcxNjM4OTM0Ng&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item active" data-color="red">
<img src="https://images.unsplash.com/photo-1606914343270-759743aa2c4e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8cmVkfHx8fHx8MTcxNjM4OTM2Nw&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item active" data-color="red">
<img src="https://images.unsplash.com/photo-1518894347072-3bfedb006095?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8cmVkfHx8fHx8MTcxNjM4OTM4NQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item active" data-color="red">
<img src="https://images.unsplash.com/photo-1618423771880-2bcfa6b67c89?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8cmVkfHx8fHx8MTcxNjM4OTU3OQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item active" data-color="red">
<img src="https://images.unsplash.com/photo-1605370898509-7300113f91a7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8cmVkfHx8fHx8MTcxNjM4OTYxMw&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="green">
<img src="https://images.unsplash.com/photo-1525923838299-2312b60f6d69?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Z3JlZW58fHx8fHwxNzE2Mzg5Njg4&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="green">
<img src="https://images.unsplash.com/photo-1599474113437-a11439660d91?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Z3JlZW58fHx8fHwxNzE2Mzg5NzE4&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="green">
<img src="https://images.unsplash.com/photo-1581609620565-79d48e493b89?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Z3JlZW58fHx8fHwxNzE2Mzg5NzUw&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="green">
<img src="https://images.unsplash.com/photo-1551970634-747846a548cb?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Z3JlZW58fHx8fHwxNzE2Mzg5Nzc2&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="green">
<img src="https://images.unsplash.com/photo-1495584816685-4bdbf1b5057e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Z3JlZW58fHx8fHwxNzE2Mzg5ODM3&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="green">
<img src="https://images.unsplash.com/photo-1488415032361-b7e238421f1b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Z3JlZW58fHx8fHwxNzE2Mzg5ODEx&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="blue">
<img src="https://images.unsplash.com/photo-1593344352545-ffb4a9512528?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Ymx1ZXx8fHx8fDE3MTYzODk5NzE&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=100" alt="">
</li>
<li class="images__item" data-color="blue">
<img src="https://images.unsplash.com/photo-1608243136637-48b0924bfc9f?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8Ymx1ZXx8fHx8fDE3MTYzODk5OTU&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0