Крок 1: Ескіз проекту нескінченної галереї
Крок 2: Розмітка HTML
Ми будемо працювати з дуже стандартної розміткою: заголовок і контейнер для зображень. Перегляд ескізів згрупуємо в безліч з трьох рядів, які будуть містити посилання на повнорозмірні зображення. Після кожної групи ми додамо текст, який показує загальну кількість зображень, і посилання на початок сторінки.
Фреймворк YII2. Швидка розробка з сучасним PHP фреймворком
Дізнайся тонкощі сучасної веб-розробки за допомогою фреймворка YII2
Крок 3: CSS
CSS теж досить стандартний. По-перше, ми визначаємо кольору сторінки та місце розташування заголовка і абзаців.
Далі для контейнера і зображень я використовував трохи CSS3 для додавання закруглені кути і тіней. Не забувайте, «-moz-box-shadow» і «-moz-border-radius» використовуються в Firefox, а «-webkit-box-shadow» і «-webkit-border-radius» - в Chrome і Safari.
Крок 5: Скрипт PHP
Це дуже коротка дія. Нам потрібно викликати скрипт PHP індексом наступного зображення, який нам потрібен як параметр. Перш за все, ми повинні витягти всі доступні імена зображень з каталогу і зберегти їх в масив. Я систематизував свої зображення в дві папки: «thumb» і «img», які містять відповідно зменшені і повнорозмірні. Зверніть увагу, що зменшені зображення повинні мати точно такі ж імена, як відповідні їм зображення.
Тут ми визначаємо змінну для каталогу, з якого нам потрібно отримувати зображення, перевіряємо, чи існує він і є чи доступним для читання і зчитуємо все імена файлів з нього. При читанні повного вмісту папки, ми обов'язково отримаємо два додаткові елементи, які нам не потрібні: «.» - це означає поточний каталог, і «..» - означає посилання на батьківський каталог. Щоб врахувати це, нам потрібно перевіряти, чи відрізняється читається елемент від зазначених двох, щоб потім безпечно додати його в свій масив.
Зауважте, що при додаванні елемента в масив, якщо не вказувати позицію куди він буде поміщений, він буде поміщений в кінець масиву.
Тут ми отримуємо в якості параметра в URL індекс наступного потрібного нам зображення і инициализируем рядок відповіді.
Як я вже говорив, картинки будуть згруповані в набори з трьох рядів, де кожен ряд буде містити по три зображення, так що нам потрібно всього дев'ять зображень, щоб повернути все імена файлів в групі. Починаємо з індексу, отриманого в якості параметра, $ n, і рухаємося до $ n + 9. При кожному збільшенні додаємо ім'я зображення, за яким слід «;», в текст відповіді. Тут відбувається невеликий фокус. У нас немає нескінченної кількості зображень; так що для створення ефекту «нескінченної», ніколи не закінчується галереї, ми повинні скидати в початок поточний індекс кожен раз, коли він ставати більше загальної кількості зображень. Це зроблено з застосуванням функції «modulo» або «%» між індексом і загальною кількістю зображень.
В результаті цієї операції ми отримуємо залишок від ділення цих двох елементів. Наприклад, якщо індекс «$ i» дорівнює «50", а кількість зображень «count ($ files)» одно «45", результат буде дорівнює «5". Таким же чином, якщо «$ i» - «50», а «count ($ files)» - «65», результат буде «50". Нарешті, нам необхідно відправити назад текст відповіді.
Ось остаточний варіант скрипта для PHP. Просто помістіть цей код в новий файл .php.
Як завжди, спочатку ми визначаємо змінні, які нам пізніше знадобляться.
Щоб визначити, чи знаходиться смуга прокрутки поблизу низу сторінки, нам потрібні три змінні:
«ContentHeight» - висота вихідної галереї
«PageHeight» - висота видимої в браузері сторінки
«ScrollPosition» - позиція смуги прокрутки, відміряна від верху
Нарешті, нам потрібна змінна для індексу наступної сторінки (яку ми збираємося послати в PHP-скрипт) і змінна для об'єкта запиту Ajax.
Тут нам потрібно визначити функцію, яка додасть зображення в контейнер HTML.
Фреймворк YII2. Швидка розробка з сучасним PHP фреймворком
Дізнайся тонкощі сучасної веб-розробки за допомогою фреймворка YII2
Об'єкт запиту проходить різні стани після того, як запит зроблено, і у кожного стану є своє числове позначення. Нас цікавить тільки одне значення - «4», яке означає фінальну стадію, коли запит закінчено. Спочатку перевіряємо, чи знаходиться запит в цьому стані, а потім перевіряємо, чи отримали ми відгук.
Якщо виконані обидві умови, тоді нам потрібно розібрати текст відповіді на частини. Це означає, що ми повинні розділити імена файлів в масив. Пам'ятайте, що скрипт PHP повертає один рядок з іменами, розділеними крапкою з комою. Ось приклад: Achievements.jpg; Bw.jpg; Camera.jpg; Cat-Dog.jpg; CREATIV.jpg; creativ2.jpg; Earth.jpg; Endless.jpg; EndlesSlights.jpg;
Є невелика проблемка, з якої ми повинні дати собі раду в першу чергу; текст відповіді може починатися з символу перекладу рядка, який нам не потрібен. Це легко виправити за допомогою функції «replace», яка приймає два параметри: «\ r \ n» - символ перекладу рядка і «» - порожній рядок, яка повинна замінити всі входження першого параметра. Тепер все, що потрібно зробити - це розбити рядок по разделителю «;».
Далі ми повинні додати зображення в свій контейнер.
Для кожного елемента масиву ми робимо перевірку, не порожня чи це рядок, і додаємо зменшене зображення і посилання на нього. Також нам потрібно використовувати лічильник «j» для розподілу зображень по рядах. Після кожного третього і шостого доданого зображення ми створюємо новий рядок, а після дев'яти доданих зображень вставляємо текст, що відображає загальне число показаних зображень і посилання на верх сторінки.
Ось функція в завершеному вигляді.
Зараз ми збираємося визначити функцію, яка перевіряє, чи наближається положення прокрутки до низу сторінки, і робить запит на сервер.
По-перше, нам потрібно визначити місце розташування смуги прокрутки. Для Internet Explorer це робиться трохи по-іншому, тому нам потрібно перевірити, яким браузером користується клієнт, і потім просто зберегти це значення в змінній, яку ми раніше передбачили.
Тепер перевіряємо, наскільки далеко ми знаходимося від кінця нашої галереї, тобто не досягнула чи видима в браузері частина сторінки відстані в 500px від низу сторінки. Це - не точна величина, і можна використовувати будь-яке інше значення, яке порахуєте підходящим. До тих пір, поки ця умова вірно, можна продовжувати додати нові зображення.
Крок 15: Створення об'єкта XMLHttpRequest
Ми готові створити об'єкт XMLHttpRequest і відіслати дані за допомогою нього. Знову повторюю, для Internet Explorer визначення трохи інші, так що ми також повинні це враховувати.
Перед відправкою запиту нам потрібно задати ім'я PHP-скрипта на сервері і додати параметри, які потрібно йому надати.
Це - проста текстова змінна, що представляє URL сторінки.
Настав час відправити запит.
URL визначається викликом методу «open». Другий параметр є єдино важливим для нас, так як він позначає URL скрипта. Після цього все, що нам потрібно - це відправити запит за допомогою send (). Це запустить PHP-скрипт, а результат його роботи буде перебувати в «xmlhttp.responseText».
Останній крок - розмістити новий контент на сторінці, викликавши певну раніше функцію «putImages», і підготувати змінні для наступного запиту.
У нас в галереї дев'ять нових зображень, таким чином, ми збільшуємо «n» на 9. Ще нам потрібно змінити висоту сторінки; тому збільшуємо «contentHeight» на 800.
Просто визначте властивість «onload» тега «body» і встановіть його значення на функцію «setInterval». Це буде запускати функцію «scroll» кожну чверть секунди. Крім того, ви можете змінити це значення часу, але я виявив, що воно оптимально для того, що нам потрібно.
Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.
Фреймворк YII2. Швидка розробка з сучасним PHP фреймворком
Дізнайся тонкощі сучасної веб-розробки за допомогою фреймворка YII2
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
