La galería de cartera es útil cuando su sitio web contiene diferentes tipos de contenido o muchos contenidos. Con la ayuda de una galería de cartera, puede mostrar fácilmente todos los contenidos en su página principal al usuario. Pero si el usuario desea algunos contenidos específicos, debemos adjuntar filtros en la cartera. En este artículo, agregaremos filtros usando JavaScript. Antes de continuar con este artículo, puede ver el artículo ‘¿ Cómo crear una galería de portafolio usando HTML y CSS? ‘.
Creación de la estructura: en esta sección, crearemos la estructura básica del sitio web del portafolio. Aquí, adjuntaremos el atributo de título para que el usuario pueda saber cuál será el tipo de contenido en cada cuadrícula del portafolio.
- Código HTML: En esta sección, diseñaremos la estructura básica de Portfolio Gallery.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
</head>
<body>
<!-- Title and tag -->
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>A Computer Science Portal for Geeks</h3>
<hr>
<!-- Content of the body-->
<h2>Portfolio of Languages</h2>
<!-- Button foreach group -->
<div id="filtering">
<button class="bttn active"
onclick="geeksportal('all')">
Show all
</button>
<button class="bttn"
onclick="geeksportal('Markup')">
Markup
</button>
<button class="bttn"
onclick="geeksportal('Style')">
Style
</button>
<button class="bttn"
onclick="geeksportal('Scripting')">
Scripting
</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column Markup">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html.png"
alt="HTML" style="width:100%">
<h3><a href="#">
HTML Tutorials
</a>
</h3>
<p>
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language. HTML
is the combination of Hypertext
and Markup language. Hypertext
defines the link between the web
pages.
</p>
</div>
</div>
<div class="column Styleshit">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
alt="CSS" style="width:100%">
<h3><a href="#">
CSS Tutorials
</a>
</h3>
<p>
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS allows
you to apply styles to web pages.
</p>
</div>
</div>
<div class="column Scripting">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/php-1.png"
alt="" style="width:100%">
<h3><a href="#">
PHP Tutorials
</a>
</h3>
<p>
The term PHP is an acronym for PHP:
Hypertext Preprocessor. PHP is a
server-side scripting language
designed specifically for web
development. PHP can be easily
embedded in HTML files.
</p>
</div>
</div>
<div class="column Scripting">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
alt="" style="width:100%">
<h3><a href="#">
JavaScript Tutorials
</a>
</h3>
<p>
Javascript was developed by Brendan
Eich in 1995. At first, it was called
LiveScript but was later name to
JavaScript. JavaScript is the muscle
of the structure
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Estructura de diseño: en la sección anterior, hemos creado la estructura del sitio web básico y ahora vamos a usar CSS para diseñar la estructura de la página web.
- Código CSS:
CSS
<style>
/* Wildcard styling */
* {
box-sizing: border-box;
}
/* Padding for whole body */
body {
padding: 15px;
}
.container {
max-width: 1200px;
margin: auto;
}
/* Styling h2 tag */
h1 {
Color: green;
word-break: break-all;
}
/* Anchor tag decoration */
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
.row {
margin: 0px -14px;
padding: 8px;
}
.row > .column {
padding: 6px;
}
.column {
float: left;
width: 25%;
display: none;
}
/* Content decoration */
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
/* Paragraph decoration */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.row:after {
content: "";
display: table;
clear: both;
}
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
.show {
display: block;
}
/* Style the filter buttons */
.bttn {
border: none;
padding: 8px 14px;
background-color: gray;
}
.bttn:hover {
background-color: #007EE5;
opacity: 0.8;
}
.bttn.active {
background-color: #007EE5;
color: white;
}
/* Window size 850 width set */
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
/* Window size 400 width set */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
- Código JavaScript:
javascript
<script>
geeksportal("all")
function geeksportal(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current
// button (highlight it)
var btnContainer = document.getElementById("filtering");
var btns = btnContainer.getElementsByClassName("bttn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current =
document.getElementsByClassName("active");
current[0].className =
current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
Combinación de código HTML, CSS y JavaScript: combinación de código de sección HTML, CSS y JavaScript para crear una galería de cartera completa con el filtro.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<style>
/* Wildcard styling */
* {
box-sizing: border-box;
}
/* Padding for whole body */
body {
padding: 15px;
}
.container {
max-width: 1200px;
margin: auto;
}
/* Styling h2 tag */
h1 {
Color: green;
word-break: break-all;
}
/* Anchor tag decoration */
a {
text-decoration: none;
color: #5673C8;
}
a:hover {
color: lightblue;
}
.row {
margin: 0px -14px;
padding: 8px;
}
.row > .column {
padding: 6px;
}
.column {
float: left;
width: 25%;
display: none;
}
/* Content decoration */
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
/* Paragraph decoration */
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.row:after {
content: "";
display: table;
clear: both;
}
.content {
background-color: white;
padding: 10px;
border: 1px solid gray;
}
.show {
display: block;
}
/* Style the filter buttons */
.bttn {
border: none;
padding: 8px 14px;
background-color: gray;
}
.bttn:hover {
background-color: #007EE5;
opacity: 0.8;
}
.bttn.active {
background-color: #007EE5;
color: white;
}
/* Window size 850 width set */
@media screen and (max-width: 850px) {
.column {
width: 50%;
}
}
/* Window size 400 width set */
@media screen and (max-width: 400px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<!-- Title and tag -->
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>A Computer Science Portal for Geeks</h3>
<hr>
<!-- Content of the body-->
<h2>Portfolio of Languages</h2>
<!-- button foreach group -->
<div id="filtering">
<button class="bttn active"
onclick="geeksportal('all')">
Show all
</button>
<button class="bttn"
onclick="geeksportal('Markup')">
Markup
</button>
<button class="bttn"
onclick="geeksportal('Style')">
Style
</button>
<button class="bttn"
onclick="geeksportal('Scripting')">
Scripting
</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column Markup">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/html.png"
alt="HTML" style="width:100%">
<h3><a href="#">
HTML Tutorials
</a>
</h3>
<p>
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language. HTML
is the combination of Hypertext
and Markup language. Hypertext
defines the link between the web
pages.
</p>
</div>
</div>
<div class="column Styleshit">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/CSS.png"
alt="CSS" style="width:100%">
<h3><a href="#">
CSS Tutorials
</a>
</h3>
<p>
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS allows
you to apply styles to web pages.
</p>
</div>
</div>
<div class="column Scripting">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/php-1.png"
alt="" style="width:100%">
<h3><a href="#">
PHP Tutorials
</a>
</h3>
<p>
The term PHP is an acronym for PHP:
Hypertext Preprocessor. PHP is a
server-side scripting language
designed specifically for web
development. PHP can be easily
embedded in HTML files.
</p>
</div>
</div>
<div class="column Scripting">
<div class="content">
<img src=
"https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
alt="" style="width:100%">
<h3><a href="#">
JavaScript Tutorials
</a>
</h3>
<p>
Javascript was developed by Brendan
Eich in 1995. At first, it was called
LiveScript but was later name to
JavaScript. JavaScript is the muscle
of the structure
</p>
</div>
</div>
</div>
</div>
<script>
geeksportal("all")
function geeksportal(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1)
w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current
// button (highlight it)
var btnContainer = document.getElementById("filtering");
var btns = btnContainer.getElementsByClassName("bttn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current =
document.getElementsByClassName("active");
current[0].className =
current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA