10 самых захватывающих сеток jQuery
jQuery, как правило, является первым выбором для большинства людей, которые хотят окунуться в программирование на JavaScript, поскольку он предоставляет простой метод выбора элементов HTML и манипулирования DOM. jQuery пользуется огромной популярностью, согласно недавней статистике W3Techs, “jQuery используется 95,4% всех веб-сайтов, библиотеку JavaScript которых мы знаем.”
jQuery также используется многими библиотеками JavaScript в качестве зависимости, и уже выпущена альфа-версия нового основного выпуска, jQuery 3.0. Если ваш проект каким-либо образом использует jQuery и вы хотите динамичный, гибкий макет для вашего дизайна стоит подумать о том, чтобы включить плагин jQuery grid в ваш стек приложений.
Как работают jQuery Grid?
Сетка JQuery позволит вам создать Pinterest-подобные макеты для вашего сайта. Они работают как виртуальная матрица, они следуют “коробка внутри коробки” принцип. Сетки jQuery динамически рассчитывают оптимальное расположение элементов и заполняют ими страницу таким образом, чтобы оставить наименьшее количество пустого пространства, что-то вроде того, что вы видите в этих полях здесь..
Основным преимуществом сеток jQuery по сравнению с сетками CSS является то, что они работают с изображениями или другими элементами мультимедиа, которые имеют разную ширину и высоту. Крутые эффекты JavaScript также являются важной причиной для использования сеток jQuery для создания современного макета..
В этом посте вы можете прочитать о 10 самых захватывающих сеток jQuery которые в настоящее время на рынке - конечно, как и jQuery, все они с открытым исходным кодом и бесплатно.
1. jQuery вложенный
JQuery Nested предоставляет вам удобный многостолбцовый макет сетки, который отзывчив и работает на всех видах устройств. Этот плагин JQuery рекламирует себя как полностью без пробелов. Сначала этот лозунг может звучать как дешевый маркетинговый трюк, но плагин на самом деле очень хорошо справляется с пропуском, как и обещали его создатели..
JQuery Nested следует уникальный сценарий в заполнение матрицы сетки. Сначала он создает сетку из нескольких столбцов, затем сканирует матрицу на наличие пробелов и заполняет их, переупорядочивая различные элементы. Наконец - и это шаг, который делает эту сетку без зазоров - она изменяет размеры любого элемента в нижнем ряду, который не помещается должным образом в зазор.
2. Freewall
Freewall позволяет создавать макет, который вы хотите, будь то сетка изображений, вложенная сетка, кладка или сетка в стиле metro. Он имеет много параметров, которые вы можете установить в качестве переменных JavaScript, таких как GutterX, GutterY, одушевленный, cellW, cellH, и т. д. Он имеет пользовательские события, такие как onGapFound а также OnResize, и пользовательские методы, а также.
Вы можете найти хорошие примеры кода на их сайте. Разработчики также заботились о бедных людях, которые все еще должны разрабатывать для старых браузеров, поэтому Freewall поддерживает Internet Explorer 8, и это также имеет решение для отключенного JavaScript, как он использует CSS 3-анимация как альтернативная стратегия JS. Проверьте нашу статью о Freewall здесь.
3. Кладка
Имя старого доброго масонства должно быть знакомо каждому ушному опытному дизайнеру. Если вы не слышали об этом, масонство библиотека макетов каскадных сеток который работает как с jQuery, так и с ванильным JavaScript.
Этот удобный плагин является основой многих популярных тем WordPress. Вам даже не нужно загружать его на свой сервер, так как вы можете легко связать библиотеку прямо из CDN.
>
