如何使用HTML、CSS和JS创建响应式可过滤的游戏

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;
}

.gallery{
   width: 100%;
   display: block;
   min-height: 100vh;
   background-color: #2a2932;
   padding: 100px 0;
}

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

 
   所有
   工具
   游戏
   3D风格游戏
   手机端游戏
 

CSS

.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;
}

演示效果

我用下面的一些 CSS 代码设计了活动按钮。也就是说你在此处单击的类别会发生一些变化。这里的变化由下面的 CSS 代码决定。背景颜色和边框颜色将变为蓝色。

CSS

.gallery .gallery-filter .filter-item.active{
  color: white;
  border-color : #16b5ef;
  background: #16b5ef;
}

演示效果

第 3 步：将图片添加到图库

现在我已经使用以下 HTML 代码添加了所有图像。在这里我添加了 15 个项目。在第一个 div (

HTML

	
		
			
		
	

	
		
			
		
	
	
	
		
			
		
	

	
		
			
		
	
 
   //...等等一共15个小项目，太长我就不一一列出影响阅读了，需要源码在文首或文末自取

第 4 步：设计上面添加的项目

现在我已经使用 CSS 代码精美地排列了这些项目。在这里我在每列中使用了三个项目。使用代码width: calc (100% / 3)将这三个项目放在每一列中。在这里，如果你想在每列中放置四个图像可以使用 4 替换 3。

CSS

.gallery .gallery-item{
	width: calc(100% / 3);
	padding: 15px;

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

演示效果

我通过@keyframes 使用了动画。当你单击一个类别时，这些类别中的每一个都将与图像并排显示。例如，如果您单击具有四个图像的类别。第一行有两个图像，第二行有两个图像。

当您单击此类别时，该类别其余部分中的所有图像将被隐藏，所有四个图像将并排显示。以下代码已用于使此重定位更加生动。此处使用了 0.5 秒，这意味着更改该位置需要 0.5 秒。

CSS

.gallery .gallery-item.hide{
	display: none;
}

第 5 步：使可过滤的图片库具有响应性

现在我已经使用 CSS 代码的媒体查询使它具有响应性。在这里，我们为移动设备和标签添加了单独的信息。

CSS

@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;
	}
}

在我手机上的演示效果

第 6 步：现在使用 JavaScript 执行此设计

上面我们刚刚设计了它，现在我们将使用 JavaScript 代码实现它。换句话说，如果我们点击此导航中的类别，我们将执行该类别的图像，以便可以看到它们。

首先设置gallery-filter 和gallery-item 的常量。因为我们知道在 JavaScript 中没有任何 ID 或类函数可以直接使用。

JavaScript

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

我已经使用下面的 JavaScript 代码实现了这些类别按钮。

JavaScript

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");
       }

   	 });
   }
 });

以上是“如何使用HTML、CSS和JS创建响应式可过滤的游戏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！