Горы
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="/w3images/mountains.jpg" alt="Горы" style="width:100%">
<h4>Горы</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/lights.jpg" alt="Северное сияние" style="width:100%">
<h4>Северное сияние</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/nature.jpg" alt="Природа" style="width:100%">
<h4>Лес</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars1.jpg" alt="Машина" style="width:100%">
<h4>Ретро</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars2.jpg" alt="Машина" style="width:100%">
<h4>Быстро</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars3.jpg" alt="Машина" style="width:100%">
<h4>Классика</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people1.jpg" alt="Люди" style="width:100%">
<h4>Девочка</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people2.jpg" alt="Люди" style="width:100%">
<h4>Мужчина</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/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++) {
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(" ");
}
// Добавить активный класс к текущей кнопке (выделите ее)
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";
});
}
Редактор кода »
Совет:Кроме того, проверить Галерея портфолио
