css+js实现自适应商品列表数据分类筛选效果代码
代码语言：html
所属分类：响应式
代码描述：css+js实现自适应商品列表数据分类筛选效果代码
代码标签： css js 自适应 商品 列表 数据 分类 筛选
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
html {
font-family: "Open Sans", sans-serif;
font-weight: 300;
min-height: 100vh;
width: 100vw;
font-size: 16px;
box-sizing: border-box;
}
html * {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
flex: 0 0 100%;
margin: 0;
background: #f5f5f5;
align-items: center;
justify-content: flex-start;
padding: 0 1.5rem;
}
.filters,
.products {
margin: 2rem auto;
padding: 0;
width: 1100px;
max-width: 100%;
}
.filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.filter {
all: unset;
appearence: none;
cursor: pointer;
color: #222;
opacity: 0.35;
font-weight: 500;
transition: 0.2s ease;
}
.filter:hover, .filter:focus {
opacity: 0.7;
}
.filter.is-active {
opacity: 1;
}
.products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
grid-auto-rows: auto;
gap: 1.5rem;
position: relative;
}
.product {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
overflow: hidden;
position: relative;
text-decoration: none;
color: #222;
will-change: opacity, visibility, transform;
transition-property: opacity, visibility;
transition-duration: 350ms;
transition-timing-function: ease;
}
.product:hover, .product:focus {
outline: none;
text-decoration: none;
}
.product:hover .product__image-inner, .product:focus .product__image-inner {
transform: scale(1.1, 1.1);
filter: grayscale(0);
}
.product.is-hidden {
position: absolute;
visibility: hidden;
opacity: 0;
}
.product__image {
position: relative;
margin-bottom: 0.5rem;
overflow: hidden;
width: 100%;
aspect-ratio: 1/1;
}
.product__image-inner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 50% 50%;
object-position: 50% 50%;
filter: grayscale(0.7);
transition: 0.2s ease;
}
.product__name {
font-size: 1.125rem;
font-weight: 500;
margin: 0;
line-height: 1;
}
.product__rating {
display: flex;
line-height: 1;
font-size: 1.5rem;
font-family: "Material Symbols Outlined";
font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 200, "opsz" 48;
}
.product__rating span {
display: contents;
}
.product__rating span::before {
content: "star";
color: #787878;
}
.product__rating[value="1"] span:nth-child(1) ~ span::before {
opacity: 0.25;
}
.product__rating[value="2"] span:nth-child(2) ~ span::before {
opacity: 0.25;
}
.product__rating[value="3"] span:nth-child(3) ~ span::before {
opacity: 0.25;
}
.product__rating[value="4"] span:nth-child(4) ~ span::before {
opacity: 0.25;
}
.product__rating[value="5"] span:nth-child(5) ~ span::before {
opacity: 0.25;
}
.product__price {
margin: 0;
font-weight: 500;
}
</style>
</head>
<body>
<div class="filters">
<button class="filter" data-filter="Best Sellers">Best Sellers</button>
<button class="filter" data-filter="New Arrivals">New Arrivals</button>
<button class="filter" data-filter="Hot Sales">Hot Sales</button>
</div>
<div class="products">
<a class="product" href="" data-filter="New Arrivals,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" /></div>
<h4 class="product__name">Some Cool Shoes</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="Hot Sales,Best Sellers">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1483103068651-8ce44652c331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" /></div>
<h4 class="product__name">Super Dope Hat</h4>
<data class="product__rating" value="3"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$38.99</p>
</a>
<a class="product" href="" data-filter="New Arrivals,Hot Sales">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1585751092218-cea84c1ecf01?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format" /></div>
<h4 class="product__name">Radical Tie-dye Shirt</h4>
<data class="product__rating" value="4"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="New Arrivals,Hot Sales">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1632226390535-2f02c1a93541?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" /></div>
<h4 class="product__name">Very Suave Vest</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="Hot Sales,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format" /></div>
<h4 class="product__name">Basci Denim Pants</h4>
<data class="product__rating" value="2"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$45.99</p>
</a>
<a class="product" href="" data-filter="Hot Sales,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1590316519564-ebeeca222a95?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aG9vZGllfGVufDB8fDB8fA%3D%3D&auto" /></div>
<h4 class="product__name">DJ Hoodie</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$79.99</p>
</a>
<a class="product" href="" data-filter="Best Sellers,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" /></div>
<h4 class="product__name">Some Cool Shoes</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="Best Sellers,Best Sellers">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1483103068651-8ce44652c331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" /></div>
<h4 class="product__name">Super Dope Hat</h4>
<data class="product__rating" value="3"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$38.99</p>
</a>
<a class="product" href="" data-filter="Hot Sales,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1585751092218-cea84c1ecf01?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format" /></div>
<h4 class="product__name">Radical Tie-dye Shirt</h4>
<data class="product__rating" value="4"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="Hot Sales,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1632226390535-2f02c1a93541?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" /></div>
<h4 class="product__name">Very Suave Vest</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="New Arrivals,Hot Sales">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format" /></div>
<h4 class="product__name">Basci Denim Pants</h4>
<data class="product__rating" value="2"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$45.99</p>
</a>
<a class="product" href="" data-filter="Best Sellers,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1590316519564-ebeeca222a95?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aG9vZGllfGVufDB8fDB8fA%3D%3D&auto" /></div>
<h4 class="product__name">DJ Hoodie</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$79.99</p>
</a>
<a class="product" href="" data-filter="Best Sellers,Best Sellers">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1560769629-975ec94e6a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" /></div>
<h4 class="product__name">Some Cool Shoes</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="New Arrivals,Best Sellers">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1483103068651-8ce44652c331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" /></div>
<h4 class="product__name">Super Dope Hat</h4>
<data class="product__rating" value="3"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$38.99</p>
</a>
<a class="product" href="" data-filter="Hot Sales,Best Sellers">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1585751092218-cea84c1ecf01?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format" /></div>
<h4 class="product__name">Radical Tie-dye Shirt</h4>
<data class="product__rating" value="4"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="New Arrivals,Best Sellers">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1632226390535-2f02c1a93541?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80" /></div>
<h4 class="product__name">Very Suave Vest</h4>
<data class="product__rating" value="5"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$65.99</p>
</a>
<a class="product" href="" data-filter="Best Sellers,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1542272604-787c3835535d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format" /></div>
<h4 class="product__name">Basci Denim Pants</h4>
<data class="product__rating" value="2"><span></span><span></span><span></span><span></span><span></span></data>
<p class="product__price">$45.99</p>
</a>
<a class="product" href="" data-filter="Best Sellers,New Arrivals">
<div class="product__image"><img class="product__image-inner" src="https://images.unsplash.com/photo-1590316519564-ebeeca222a95?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aG9vZGllfGVufDB8fDB8fA%3D%3D&auto" /></div>
<h4 class="product__name">DJ Hoodie</h4>
<data class="product__rating" value="5"><span></span><span>.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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