Створити швидкі масові макети з Bricks.js

Це завжди було досить просто створювати сітки з jQuery, за допомогою плагінів і безкоштовних навчальних посібників від розробників.

Тим не менш, кладки сітки жорсткіше будувати, так як вони не підходять рівномірно по всій сторінці. Для стовпців ви матимете ширину фіксованого розміру висота виробу може сильно змінюватися.

Зробити піксельна ідеальна сітка Вам потрібен плагін, наприклад Bricks.js.

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

Більшість людей розпізнають матричні решітки від Pinterest, оскільки вони популяризували макет. Але, з тих пір вона виросла використовується на багатьох інших веб-сайтах, теж.

Щоб розпочати роботу з Bricks.js, вам знадобиться певний вміст а типовий макет сторінки. Ви встановлюєте плагін прямо з npm або через GitHub, якщо це простіше.

При початковій установці ви переходите три специфічні параметри:

1. Контейнер - a Елемент контейнера DOM для сітки
2. Упакований - a атрибут що визначає, як елементи перетікають у сітку
3. Розміри - a масив ширин і жолобів, визначається в пікселях

Цей плагін використовує всі ці значення для автоматизації сітки кладки з нуля.

І навіть можна використовуйте його для нескінченного завантаження якщо ви хочете, щоб масові сітки працювали так само, як Pinterest.

Перегляньте демо-сторінку для інтерактивна сітка які можна змінити для тестування. ти визначити загальну кількість елементів і він автоматизуватиме процес, показуючи загальний час візуалізації.

Наприклад, я тестував сітку з 500 елементів та це тільки взяло 13 мілісекунд Завершувати. Це не враховує час для всіх 500 зображень для завантаження, але 13 мс для автоматично створеної сітки дуже вражає.

Розпочніть роботу, завантаживши файли з GitHub та дотримуючись інструкцій з інсталяції. Це може здатися заплутаним спочатку, але чим більше ви іграєте з ним, тим легше його налаштувати.