10 найбільш захоплюючих сіток jQuery

jQuery, як правило, є першим вибором для більшості людей, які хочуть зануритися в програмування JavaScript, оскільки він надає простий метод для вибору елементів HTML і маніпулювання DOM. jQuery дико популярний, відповідно до останніх статистичних даних W3Techs, “jQuery використовується 95,4% всіх веб-сайтів, у яких ми знаємо бібліотеку JavaScript.”

jQuery також використовується багатьма бібліотеками JavaScript як залежність, а альфа-версія нового великого випуску, jQuery 3.0, вже існує. Якщо ваш проект використовує jQuery будь-яким способом і ви хочете a динамічна, гнучка компонування для вашого дизайну варто розглянути можливість включити плагін сітки jQuery у ваш стек frontend.

Як працює JQuery Grids?

jQuery сітки дозволяють вам створити макети, подібні до Pinterest. Вони працюють як віртуальна матриця, вони слідують “коробка всередині коробки” принцип. Сітки jQuery динамічно обчислюють найкраще розташування елементів і заповнюють їх у такий спосіб, який залишає найменше пробілів, щось подібне до того, що ви бачите в цих полях.

Основною перевагою сіток jQuery порівняно з сітками CSS є те, що вони працюють з зображеннями або іншими медіа-елементами, які мають різну ширину і висоту. Холодні ефекти JavaScript також є великою причиною для використання сіток jQuery для створення сучасного макета.

У цьому пості ви можете прочитати про 10 найбільш захоплюючих сіток jQuery що в даний час вийшли на ринок - звичайно, так само, як jQuery, всі вони відкриті і безкоштовні.

Вкладені jQuery

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

jQuery Nested має унікальний скрипт заповнення матриці сітки. Спочатку він створює сітку з кількома стовпцями, потім сканує матрицю для пропусків і заповнює їх, перенастроюючи різні елементи. Нарешті - і це крок, який робить цю сітку безмежною - вона змінює будь-який елемент у нижньому ряду, який не відповідає правильному розриву.

2. Freewall

Freewall дозволяє створювати макет, який ви хочете, чи є це сіткою зображення, вкладеною сіткою, кладкою або сіткою в стилі метро. Він має багато параметрів, які можна встановити як змінні JavaScript, такі як gutterX, gutterY, animate, cellW, cellH, і т.д. Він має спеціальні події, такі як onGapFound і onResize, а також спеціальні методи.

Приклади коду можна знайти на своєму веб-сайті. Розробники також піклувалися про бідних душ, які все ще повинні розробляти для старих браузерів, тому Freewall підтримує Internet Explorer 8, і вона також має рішення для відключеного JavaScript, як він використовує Анімація CSS 3 як стратегія запам'ятовування JS. Перегляньте нашу статтю про Freewall тут.

3. Кладка

Назва старого доброго масонства повинна бути знайома кожному досвідченому дизайнеру. У випадку, якщо ви ще не чули про це, масонство є бібліотека каскадної сітки що працює як з jQuery, так і з ванільним JavaScript.

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

> PHHSNEWS