10-те най-завладяващи jQuery Grids
jQuery обикновено е първият избор за повечето хора, които искат да потапят краката си в програмирането на JavaScript, тъй като осигурява лесен метод за избор на HTML елементи и манипулиране на DOM. jQuery е изключително популярен, според последните статистики на W3Techs, “jQuery се използва от 95.4% от всички уебсайтове, чиято JavaScript библиотека познаваме.”
jQuery се използва и от много JavaScript библиотеки като зависимост, а алфа версията на новата голяма версия, jQuery 3.0 вече е там. Ако вашият проект използва jQuery по някакъв начин и искате a динамично, гъвкаво оформление за вашия дизайн си струва да помислите за включване на jQuery плъгин във вашия стек.
Как работят jQuery Grids?
jQuery решетки ви позволяват създайте Pinterest-подобни оформления за вашия сайт. Те работят като виртуална матрица, следват “кутия в кутия” принцип. jQuery мрежите динамично изчисляват кое е най-доброто подреждане на елементите и попълнете страницата с тях по начин, който оставя най-малко празно пространство, нещо като това, което виждате в тези полета тук.
Основното предимство на jQuery мрежите в сравнение с CSS мрежите е, че те работят с изображения или други медийни елементи, които имат различна ширина и височина. Големите ефекти на JavaScript също са голяма причина да се използват jQuery мрежи за създаване на модерен дизайн.
В този пост можете да прочетете за 10 най-вълнуващи jQuery мрежи които в момента са на пазара - разбира се, точно като jQuery, всички те са с отворен код и безплатно.
1. jQuery Nested
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 и vanilla JavaScript.
Този удобен плъгин е в основата на много популярни теми на WordPress. Дори не трябва да го качвате на вашия сървър, тъй като лесно можете да свържете библиотеката директно от CDN.
>
