響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面 用于各種網(wǎng)站以按類別對(duì)圖像進(jìn)行排序。在本文中，我將向您展示如何借助 HTML CSS 和 javascript 創(chuàng)建響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面。

可過(guò)濾作品集是一種流行的網(wǎng)絡(luò)元素，可用于各種網(wǎng)站。它是一種作品畫(huà)廊，大量作品整齊地排列在一起。值得注意的一點(diǎn)是，所有作品都可以在這里按類別排序。有一個(gè)導(dǎo)航欄，其中對(duì)所有類別進(jìn)行了排序。單擊這些類別中的任何一個(gè)時(shí)。然后可以看到該類別中的所有作品，而隱藏其余作品。結(jié)果，用戶可以輕松地找到他選擇的圖像。

我首先在網(wǎng)頁(yè)上創(chuàng)建了一個(gè)導(dǎo)航欄。在這里創(chuàng)建了五類按鈕，一共使用了15張圖片。如果需要，您可以使用這更換作品或者添加更多作品。在導(dǎo)航欄中的分類中，你可以看到與您點(diǎn)擊的分類相關(guān)的作品。同樣，當(dāng)您單擊另一個(gè)類別時(shí)，該類別的作品將被看到，其余的將被隱藏。我讓它完全響應(yīng)，以便它可以在所有設(shè)備上使用。

? 在線演示

? 在線演示地址

http://haiyong.site/moyu

提示：源碼相信大家應(yīng)該都知道怎么獲取，直接F12 或者ctrl+u ，感興趣的小伙伴可以把網(wǎng)址收藏起來(lái)，后面我會(huì)繼續(xù)更新，打造一個(gè)擁有100個(gè)游戲+工具的摸魚(yú)網(wǎng)站。目前進(jìn)度：15/100

? bilibili演示視頻

我已經(jīng)通過(guò)下面的圖文向初學(xué)者展示了如何為初學(xué)者制作它的完整步驟。當(dāng)然，你也可以使用文章底部的下載按鈕下載所需的源代碼。

我使用下面的 CSS 代碼完成了網(wǎng)頁(yè)的基本設(shè)計(jì)。

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 步：創(chuàng)建基本結(jié)構(gòu)

我已經(jīng)使用我自己的 HTML 和 CSS 代碼創(chuàng)建了這個(gè)圖片庫(kù)的基本結(jié)構(gòu)。這里我用background-color: # 2a2932 和 min-height: 100vh。

HTML

<section class="gallery">	<div class="container">  	div>section>

CSS

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

演示效果

是的，你沒(méi)看錯(cuò)，現(xiàn)在就是一團(tuán)黑。

? 第 2 步：為類別創(chuàng)建導(dǎo)航欄

現(xiàn)在我已經(jīng)使用下面的 HTML 和 CSS 代碼創(chuàng)建了一個(gè)導(dǎo)航欄。正如我之前所說(shuō)，有一個(gè)導(dǎo)航欄，所有類別都在其中進(jìn)行了排序。在這里，我使用了 5 個(gè)主題和 15 個(gè)圖片。如果需要，你可以增加或減少類別的數(shù)量。

類別中的文本具有按鈕的形狀。這些按鈕中的文字是font-size: 17px 并且顏色是白色的。 Border: 2px solid white 用于制作按鈕大小的文本。

HTML

<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風(fēng)格游戲span>   <span class="filter-item" data-filter="cellphone">手機(jī)端游戲span> div>div>

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 代碼設(shè)計(jì)了活動(dòng)按鈕。也就是說(shuō)你在此處單擊的類別會(huì)發(fā)生一些變化。這里的變化由下面的 CSS 代碼決定。背景顏色和邊框顏色將變?yōu)樗{(lán)色。

CSS

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

演示效果

? 第 3 步：將圖片添加到圖庫(kù)

現(xiàn)在我已經(jīng)使用以下 HTML 代碼添加了所有圖像。在這里我添加了 15 個(gè)項(xiàng)目。在第一個(gè) div (

HTML

<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個(gè)小項(xiàng)目，太長(zhǎng)我就不一一列出影響閱讀了，需要源碼在文首或文末自取div>

? 第 4 步：設(shè)計(jì)上面添加的項(xiàng)目

現(xiàn)在我已經(jīng)使用 CSS 代碼精美地排列了這些項(xiàng)目。在這里我在每列中使用了三個(gè)項(xiàng)目。使用代碼width: calc (100% / 3)將這三個(gè)項(xiàng)目放在每一列中。在這里，如果你想在每列中放置四個(gè)圖像可以使用 4 替換 3。

CSS

.gallery .gallery-item{	width: calc(100% / 3);	padding: 15px;}.gallery .gallery-item-inner img{	width: 100%;    border: 3px solid #d4dad9;}

演示效果

我通過(guò)@keyframes 使用了動(dòng)畫(huà)。當(dāng)你單擊一個(gè)類別時(shí)，這些類別中的每一個(gè)都將與圖像并排顯示。例如，如果您單擊具有四個(gè)圖像的類別。第一行有兩個(gè)圖像，第二行有兩個(gè)圖像。

當(dāng)您單擊此類別時(shí)，該類別其余部分中的所有圖像將被隱藏，所有四個(gè)圖像將并排顯示。以下代碼已用于使此重定位更加生動(dòng)。此處使用了 0.5 秒，這意味著更改該位置需要 0.5 秒。

CSS

.gallery .gallery-item.show{	animation: fadeIn 0.5s ease;}@keyframes fadeIn{	0%{		opacity: 0;	}	100%{		opacity: 1;	}}

當(dāng)您單擊一個(gè)類別時(shí)，其他所有其他項(xiàng)目都將被隱藏。此時(shí)display: none已被使用，也就意味著無(wú)法看到這些項(xiàng)目。雖然它有效，但我是在 JavaScript 的幫助下完成的。現(xiàn)在我只是把信息放進(jìn)去，然后我在 JavaScript 代碼的幫助下實(shí)現(xiàn)了它。

CSS

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

? 第 5 步：使可過(guò)濾的圖片庫(kù)具有響應(yīng)性

現(xiàn)在我已經(jīng)使用 CSS 代碼的媒體查詢使它具有響應(yīng)性。在這里，我們?yōu)橐苿?dòng)設(shè)備和標(biāo)簽添加了多帶帶的信息。

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

在我手機(jī)上的演示效果

? 第 6 步：現(xiàn)在使用 JavaScript 執(zhí)行此設(shè)計(jì)

上面我們剛剛設(shè)計(jì)了它，現(xiàn)在我們將使用 JavaScript 代碼實(shí)現(xiàn)它。換句話說(shuō)，如果我們點(diǎn)擊此導(dǎo)航中的類別，我們將執(zhí)行該類別的圖像，以便可以看到它們。

首先設(shè)置gallery-filter 和gallery-item 的常量。因?yàn)槲覀冎涝?JavaScript 中沒(méi)有任何 ID 或類函數(shù)可以直接使用。

JavaScript

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

我已經(jīng)使用下面的 JavaScript 代碼實(shí)現(xiàn)了這些類別按鈕。

JavaScript

filterContainer.addEventListener("click", (event) =>{   if(event.target.classList.contains("filter-item")){     // 停用現(xiàn)有的 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");       }   	 });   } });

到此就完成了，希望從上面的教程中，你已經(jīng)學(xué)會(huì)了如何創(chuàng)建這個(gè)可過(guò)濾的游戲+工具展示頁(yè)面 。您可以直接在你自己的任何項(xiàng)目中使用它，因?yàn)樗膊捎昧隧憫?yīng)式。你可以看到我已經(jīng)做過(guò)的更多這樣的設(shè)計(jì)。

? wuhu ! 起飛 !

希望通過(guò)本文，您已經(jīng)學(xué)會(huì)了如何使用 HTML、CSS 和 JS 創(chuàng)建響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面。我之前使用 HTML、CSS 和 JavaScript 制作了更多類型的小工具，如果您愿意，可以查看這些設(shè)計(jì)。

使用 HTML、CSS 和 JavaScript 制作的隨機(jī)密碼生成器
使用 HTML、CSS、JS 和 API 制作一個(gè)很棒的天氣 Web 應(yīng)用程序
你真的熟練運(yùn)用 HTML5 了嗎，這10 個(gè)酷炫的 H5 特性你會(huì)幾個(gè)？
11個(gè)基于HTML/CSS/JS的情人節(jié)表白可愛(ài)小游戲、小動(dòng)畫(huà)【情人節(jié)主題征文】

我已經(jīng)寫(xiě)了很長(zhǎng)一段時(shí)間的技術(shù)博客，并且主要通過(guò)CSDN發(fā)表，這是我的一篇 Web 響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面教程。我喜歡通過(guò)文章分享技術(shù)與快樂(lè)。您可以訪問(wèn)我的博客： https://haiyong.blog.csdn.net/ 以了解更多信息。希望你們會(huì)喜歡！?

? 歡迎大家在評(píng)論區(qū)提出意見(jiàn)和建議！?

如果你真的從這篇文章中學(xué)到了一些新東西，喜歡它，收藏它并與你的小伙伴分享。?最后，不要忘了?或?支持一下哦。

完整的源代碼：點(diǎn)擊此處下載