Узнать, как создать галерею портфолио с фильтрацией используя HTML, CSS и JavaScript.
Мое портфолио
Нажмите на кнопки, чтобы отфильтровать категорию:
Горы
Lorem ipsum dolor..
Сияние
Lorem ipsum dolor..
Лес
Lorem ipsum dolor..
Ретро
Lorem ipsum dolor..
Быстро
Lorem ipsum dolor..
Класс.
Lorem ipsum dolor..
Девоч.
Lorem ipsum dolor..
Мужч.
Lorem ipsum dolor..
Женщ.
Lorem ipsum dolor..
Как создать сайт портфолио
Шаг 1) Добавить HTML:
<h2>ПОРТФОЛИО</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')">Показать все</button>
<button class="btn" onclick="filterSelection('nature')"> Природа</button>
<button class="btn" onclick="filterSelection('cars')"> Машины</button>
<button class="btn" onclick="filterSelection('people')">Люди</button>
</div>
<!-- Сетка галереи портфолио -->
<div class="row">
<div class="column nature">
<div class="content">
<img src="/sw3images/mountains.jpg" alt="Горы" style="width:100%">
<h4>Горы</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/sw3images/lights.jpg" alt="Северное сияние" style="width:100%">
<h4>Северное сияние</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/sw3images/nature.jpg" alt="Природа" style="width:100%">
<h4>Лес</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/sw3images/cars1.jpg" alt="Машина" style="width:100%">
<h4>Ретро</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/sw3images/cars2.jpg" alt="Машина" style="width:100%">
<h4>Быстро</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/sw3images/cars3.jpg" alt="Машина" style="width:100%">
<h4>Классика</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/sw3images/people1.jpg" alt="Люди" style="width:100%">
<h4>Девочка</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/sw3images/people2.jpg" alt="Люди" style="width:100%">
<h4>Мужчина</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/sw3images/people3.jpg" alt="Люди" style="width:100%">
<h4>Женщина</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- КОНЕЦ СЕТКА -->
</div>
Шаг 2) Добавить CSS:
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* Сайт центр */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* Добавить отступы между каждым столбцом (если вы хотите) */
.row,
.row > .column {
padding: 8px;
}
/* Создайте три одинаковых столбца, которые плавают рядом друг с другом */
.column {
float: left;
width: 33.33%;
display: none; /* Скрыть столбцы по умолчанию */
}
/* Очистить поплавки после строк */
.row:after {
content: "";
display: table;
clear: both;
}
/* Содержание */
.content {
background-color: white;
padding: 10px;
}
/* В класс "show" добавляется к отфильтрованные элементы */
.show {
display: block;
}
/* Стиль кнопок */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
/* Добавить серый цвет фона при наведении курсора мыши */
.btn:hover {
background-color: #ddd;
}
/* Добавить темный цвет фона для активной кнопки */
.btn.active {
background-color: #666;
color: white;
}
Шаг 3) Добавить JavaScript:
filterSelection("all") // Выполните функцию и покажите все столбцы
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// Добавить класс "show" (display:block) к фильтрованным элементам, и извлеките класс "show" из элементов, которые не выбраны
for (i = 0; i < x.length; i++) {
sw3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) sw3AddClass(x[i], "show");
}
}
// Показать отфильтрованные элементы
function sw3AddClass(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 sw3RemoveClass(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(" ");
}
// Добавить активный класс к текущей кнопке (выделите ее)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
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";
});
}
Попробуйте сами »
Совет:Кроме того, проверить Галерея портфолио