❤️ 使用 HTML、CSS 和 JS 创建响应式、可过滤的游戏 + 工具显示页面 ❤️

响应式可过滤游戏 + 工具显示各种网站用于对图像进行分类的页面。 本文向您展示如何使用 HTML CSS 和 JavaScript 创建响应式、可过滤的游戏和工具展示页面。

可过滤的组合是流行的网络元素，可以在各种网站上使用。 大量的作品排列有序，有一种艺术画廊的感觉。 需要注意的一件事是，您可以在这里按类别对所有作品进行排序。 有一个导航栏，可以对所有类别进行排序。 当您单击这些类别之一时。 如果你这样做，一切正常，其余的都是隐藏的。 因此，用户可以轻松找到自己喜欢的图像。

首先，我们在网页上创建了一个导航栏。 这里创建了五类按钮，总共使用了 15 张图像。 您可以根据需要使用它来更改或添加片段。 导航栏上的类别显示与您单击的类别相关的作品。 同样，点击另一个类别将显示该类别中的作品并隐藏其余作品。 我们让它完全响应于所有设备上的工作。

？在线演示

？在线演示地址

http://haiyong.site/moyu

提示：我想每个人都应该知道如何获取源代码。 直接按 F12 或 Ctrl+U。 有兴趣的朋友请收藏网址。 后续我们会持续更新。 ，创建一个拥有100个游戏+工具的钓鱼网站。 目前进度：15/100

bilibili 演示视频

我有下面的照片和文字显示了如何为初学者制作它的完整说明。 当然，您也可以使用文章底部的下载按钮下载所需的源代码。

以下CSS代码用于完成网页的基本设计。

正文{行-高度： 1.5;font-family： sans-serif;}*{保证金:0;框-大小：边框-框;} .row{显示： flex;flex-wrap: 换行;}img{最大-宽度： 100%; 垂直-对齐： middle;}

ched 步骤 1：创建基本结构

我使用自己的 HTML 和 CSS 代码创建了该画廊的基本结构。 这里我们使用 background-color: # 2a2932 和 min-height: 100vh。

HTML

<部分 类="图库"> <div 类="容器"> </div ></部分>

CSS

.gallery{ 宽度： 100%; 显示 : 区块; min-height: Span> 100vh; 背景-颜色： # 2a2932; 填充： 100px 0;}.container{ 最大-宽度: 1170px;保证金:auto;}

演示效果

是的，你没有看错，现在只是黑色。

第 2 步：为类别创建导航栏

我们现在已经使用下面的 HTML 和 CSS 代码创建了一个导航栏。 如前所述，有一个导航栏，其中对所有类别进行排序。 我使用了 5 个主题和 15 张图像。 您可以根据需要增加或减少类别数量。

类别中的文本形状像按钮。 这些按钮的文本为font-size: 17px，颜色为白色。 Border: 2px Solid White 用于创建按钮大小的文本。

HTML

<div 类="行">  <div 类 ="图库-filter"> <Span 类="过滤器-项目活动" 数据-过滤器="全部">全部</span > < Span  类="filter-item" 数据-过滤器="工具"> 工具</span> <span class="过滤器-item" 数据[ k4]过滤器="游戏">游戏 </span> <Span 类="过滤器-item" 数据-过滤器="3D">3D风格游戏</span> <span 类="过滤器-item" 数据-过滤器="手机" 手游</span> </div> </div>

CSS>

.gallery .gallery-filter{ 填充： 0 15px; 宽度： 100%; 文本-对齐: center; 边距-底部： 40px;}.gallery .gallery-filter .filter-item{ 颜色： #ffffff; 字体-大小： 17px; 边框： 2像素纯白色 ; text-transform: 大写; 显示： inline-block; 边框-半径: 20px; 边距-右: 8px; 光标: 指针; 填充: 8px 20px 8px 20px; 行-高度： 1.2 ; 过渡：全部0.3秒放松;}

演示效果

我使用下面的CSS代码设计了一个活动按钮点击这里更改这里的更改由下面的 CSS 代码决定： .gallery .gallery-filter .filter-item。 .active{ 颜色：白色; border-color : #16b5ef 背景 ： #16b5ef； }

演示效果

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

本例中，添加所有图像均使用 HTML 代码。 这次我们添加了 15 个项目。 使用的类别显示在第一个 div (

) 中。 我为每个图像使用了两个 div。

HTML

<div 类="行"> <div 类="图库-物品游戏3D手机"><div class="图库-item-inner " ><a href="http://haiyong.site/aircraft-avoid-障碍"><img src="http://haiyong.site/wp-content/uploads/2021/07/aircraft-avoid-obstacles.png" >< /a></div></div><div class="图库-道具游戏3D手机"><div class="图库-项目-内部"><a href="http://haiyong.site/penhuolong "><img src="http://haiyong.site/wp-content/uploads/2021/08/penhuolong.png "></a></div></div><div 类 ="图库-项目游戏3D手机"><div class="图库-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 类="图库-物品游戏手机"<div 类="图库-项目-内部"><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>

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

I使用 CSS 代码来漂亮地排列项目。 我在每列中使用了三个项目。 使用代码 width: calc (100% / 3) 将这三个项目放置在每列中。 现在，如果您想在每列中放置 4 个图像，则可以使用 4 个而不是 3 个。

CSS

.gallery .gallery[k4 ] ]item{宽度： 计算(100% / 3);填充： 15px;}.gallery .gallery-item-inner img{宽度: 100%; 边框： 3px实线#d4dad9;}

演示效果

点击类别时通过@keyframes使用动画例如，如果单击有四个图像的类别，第一行将显示两个图像，第二行将显示两个图像，所有其余图像均被隐藏，并且所有四个图像并排显示，以使此重新排列更加清晰。 ，使用以下代码，需要 0.5 秒，更改位置需要 0.5 秒。 k4]css">.Gallery.Garery-item.show{动画: fadeIn 0.5s easy;}@keyframes 淡入{0%{不透明度： 0; }100%{不透明度： 1;}}

对于单个 When我点击一个类别，此时所有其他项目都被隐藏，这意味着它们不可见，但我使用 JavaScript 填写了信息并借助 JavaScript 代码实现了它。 CSS

.gallery gallery-item.hide{显示： 无;} 

? 响应式图片库

我们在 CSS 代码中使用了媒体查询使其具有响应能力。在这里，我们将为移动设备和标签添加多频段信息。 ">@media(最大-宽度： 491px){.gallery .gallery-item{宽度: 50%;}}@media(最大[ k4] 宽度： 667px){ .gallery .gallery-item {宽度： 100%;}.gallery .gallery-filter .filter-item{ 边距-bottom： 10px;}}

手机端演示效果 strong>

const filterContainer = 文档。querySelector(".gallery-filter");const galleryItems = 文档. querySelectorAll(".gallery-item"); 

filterContainer。 addEventListener("点击", (事件) =>{ if(事件.target.classList.包含("filter-item") ){ // 现有的活动“过滤器[ k4]停用]item" filterContainer。querySelector( ".active").classList.删除("活动") ; // 启用新的“filter-item” 事件。    目标。classList。添加("活动"); const filterValue = 事件.目标。getAttribute("data-filter"); galleryItems.forEach((项目) =>{ if(item.classList.包含 (filterValue) || filterValue === “全部”){ 项 。    classList。删除("隐藏"); item.classList.添加("显示"); } 其他{ item.classList.删除("显示"); item.classList.添加("隐藏"); } });  } });