教你使用HTML、CSS和JS创建响应式可过滤的游戏（附代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body{
	line-height: 1.5;
	font-family: sans-serif;
}
*{
	margin:0;
	box-sizing: border-box;
}

.row{
	display: flex;
	flex-wrap: wrap;
}
img{
	max-width: 100%;
	vertical-align: middle;
}

1
2
3
4
5
<section class="gallery">
	<div class="container">
  
	</div>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
.gallery{
   width: 100%;
   display: block;
   min-height: 100vh;
   background-color: #2a2932;
   padding: 100px 0;
}

.container{
	max-width: 1170px;
	margin:auto;
}

1
2
3
4
5
6
7
8
9
<div class="row">
 <div class="gallery-filter">
   <span class="filter-item active" data-filter="all">所有</span>
   <span class="filter-item" data-filter="tool">工具</span>
   <span class="filter-item" data-filter="game">游戏</span>
   <span class="filter-item" data-filter="3D">3D风格游戏</span>
   <span class="filter-item" data-filter="cellphone">手机端游戏</span>
 </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.gallery .gallery-filter{
   padding: 0 15px;
   width: 100%;
   text-align: center;
   margin-bottom: 40px;
}
.gallery .gallery-filter .filter-item{
   color: #ffffff;
   font-size: 17px;
   border: 2px solid white;
   text-transform: uppercase;
   display: inline-block;
   border-radius: 20px;
   margin-right: 8px;
   cursor: pointer;
   padding: 8px 20px 8px 20px;
   line-height: 1.2;
   transition: all 0.3s ease;
}

1
2
3
4
5
.gallery .gallery-filter .filter-item.active{
  color: white;
  border-color : #16b5ef;
  background: #16b5ef;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="row">
	<div class="gallery-item game 3D cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/aircraft-avoid-obstacles"><img src="http://haiyong.site/wp-content/uploads/2021/07/aircraft-avoid-obstacles.png"></a>
		</div>
	</div>

	<div class="gallery-item game 3D cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/penhuolong"><img src="http://haiyong.site/wp-content/uploads/2021/08/penhuolong.png"></a>
		</div>
	</div>
	
	<div class="gallery-item game 3D cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/game/lion"><img src="http://haiyong.site/wp-content/uploads/2021/07/lion.png"></a>
		</div>
	</div>

	<div class="gallery-item game cellphone">
		<div class="gallery-item-inner">
			<a href="http://haiyong.site/santa-claus"><img src="http://haiyong.site/wp-content/uploads/2021/07/santa-claus.png"></a>
		</div>
	</div>
 
   //...等等一共15个小项目，太长我就不一一列出影响阅读了，需要源码在文首或文末自取
</div>

1
2
3
4
5
6
7
8
9
.gallery .gallery-item{
	width: calc(100% / 3);
	padding: 15px;

}
.gallery .gallery-item-inner img{
	width: 100%;
    border: 3px solid #d4dad9;
}

1
2
3
.gallery .gallery-item.hide{
	display: none;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
@media(max-width: 491px){
	.gallery .gallery-item{
		width: 50%;
	}
}
@media(max-width: 667px){
    .gallery .gallery-item{
		width: 100%;
	}
	.gallery .gallery-filter .filter-item{
		margin-bottom: 10px;
	}
}

1
2
const filterContainer = document.querySelector(".gallery-filter");
const galleryItems = document.querySelectorAll(".gallery-item");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
filterContainer.addEventListener("click", (event) =>{
   if(event.target.classList.contains("filter-item")){

     // 停用现有的 active 'filter-item'
   	filterContainer.querySelector(".active").classList.remove("active");

     // 启用新的 'filter-item'
   	event.target.classList.add("active");

   	const filterValue = event.target.getAttribute("data-filter");

   	galleryItems.forEach((item) =>{

       if(item.classList.contains(filterValue) || filterValue === 'all'){
       	item.classList.remove("hide");
       	 item.classList.add("show");
       }

       else{
       	item.classList.remove("show");
       	item.classList.add("hide");
       }

   	 });
   }
 });