Как добавить фильтр в галерею портфолио с использованием HTML, CSS и JavaScript?

Опубликовано: 5 Января, 2022

Галерея портфолио полезна, когда ваш веб-сайт содержит различные типы контента или очень много контента. С помощью галереи портфолио вы можете легко отобразить пользователю все содержимое своей главной страницы. Но если пользователю нужно какое-то конкретное содержимое, нам нужно прикрепить фильтры к портфолио. В этой статье мы добавим фильтры с помощью JavaScript. Прежде чем перейти к этой статье, вы можете прочитать статью «Как создать галерею портфолио с помощью HTML и CSS?».

Создание структуры: в этом разделе мы создадим базовую структуру веб-сайта портфолио. Здесь мы прикрепим атрибут title, чтобы пользователь мог знать, каким будет тип контента для каждой ленты портфолио.

  • HTML-код: В этом разделе мы разработаем базовую структуру галереи портфолио.

    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 >

Разработка структуры: в предыдущем разделе мы создали структуру базового веб-сайта, а теперь мы собираемся использовать CSS для разработки структуры веб-страницы.

  • Код 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 */
    h 1 {
    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>
  • Код 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>

Объединение кода HTML, CSS и JavaScript: объединение кода раздела HTML, CSS и JavaScript для создания полной галереи портфолио с фильтром.

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-
JavaScript Вопросы о Web технологиях CSS-Misc HTML-Misc JavaScript-Misc

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Ember.js Свойство содержимого ArrayProxy
24 Февраля, 2023
Ошибка «Объект не определен» при попытке повернуть объект в three.js
24 Февраля, 2023
Как изменить строку в JavaScript?
23 Февраля, 2023
Как создать массив с несколькими объектами, имеющими несколько вложенных пар ключ-значение в JavaScript?
23 Февраля, 2023