Випадкові зображення з допомогою Flexbox та JavaScript

2 хв. читання

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

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

  1. Випадкова зміна вмісту, який вже присутній на сторінці (самий обмежений варіант). Якщо у вас є тільки три зображення, кожне поєднання буде показано користувачеві в дуже короткий час.

  2. Використовувати сервер, щоб тянути дані з папки. Так набагато легше створити ефект випадковості.

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

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

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

    <div>
    <figure>
    <img src="love-bike.jpg">
    </figure>
    <figure class="halvsies">
    <img src="burning-man-pyre.jpg">
    </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**, ефект плавної появи досягається з допомогою переходу.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 4.8K
Приєднався: 10 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація