Рандомні зображення з допомогою Flexbox та JavaScript

22 вересня 2014 18:33 comandante 419 0

Рандомізовані елементи веб-сторінок - простий і ефективний метод для збільшення користувачів на сайті. Цей ефект легко досягнути всього декількома рядками JavaScript.

Потрібно обережніше використовувати термін "випадковий". Процес рандомізації контенту відбувається трьома способами:

Випадкова зміна вмісту, який вже присутній на сторінці (самий обмежений варіант). Якщо у вас є тільки три зображення, кожне поєднання буде показано користувачеві в дуже короткий час.
Використовувати сервер, щоб тянути дані з папки. Так набагато легше створити ефект випадковості.
Використовуючи MySQL або API, щоб тянути випадковий вміст з бази даних, складніше всього реалізувати, але це найбільш ефективний спосіб: бази даних, як правило, складаються з величезної кількості записів, що означає високу різноманітність і непередбачуваність комбінацій.

Випадковий порядок зображень

Ми матимемо справу із серією з п'яти зображень. Розмітка виглядає приблизно так:

<div id=burningman>
<figure>
<img src="love-bike.jpg" alt>
</figure>
<figure class="halvsies">
<img src="burning-man-pyre.jpg" alt >
</figure>
…
</div>

Цікава частина flexbox полягає в тому, що деякі зображення мають однакову ширину, але подвійну висоту:

#burning-man { display: flex; flex-flow: row wrap; font-size: 0; }
#burning-man figure {
flex: 1; margin: 0;
min-width: 300px; position: relative;
}
#burning-man figure img {
width: 100%; height: auto;
opacity: 0; transition: .5s;
}
#burning-man figure img.halvsies {
flex: .5; min-width: 150px;
}
#burning-man figure img.visible { opacity: 1; }

В цьому випадку, повнорозмірні зображення мають flex значення 1 і min-width 300px; зображення в половину ширини мають властивості, які дорівнюють половині цих значень.

JavaScript складається з трьох функцій randomize(), sequentize() і makeVis() - разом з fsort(), функцією, яка викликає перші дві.

function randomize() {
for (var i = rando.children.length; i >= 0; i--){ rando.appendChild(rando.children[Math.random() * i | 0]);
}
}
function makeVis(j) {
var photo = rando.children[j].firstElementChild;
setTimeout(function() { photo.classList.add("visible"); }, 700 * j);
}
function sequentize(){
for (var j = 0; j <= rando.children.length; ++j)
makeVis(j);
}
function fsort() {
randomize();
sequentize();
}

Вони визиваються двома рядками JavaScript:

var rando = document.getElementById('burningman');
fsort();

Функція переставляє порядок <figure> елементів. Зверніть увагу, що JavaScript упорядкування повністю відрізняється від flexbox властивості order: тут ми змінюємо елементи в DOM.
sequentize(), у поєднанні з makeVis(), представляє <figure> елементи по одному, шляхом застосування visible, ефект плавної появи досягається з допомогою переходу.