Динамичный каскад сетки — это библиотека макета сетки на JavaScript. Каскад работает путем размещения элементов в оптимальном положении на основе доступного вертикального пространства, по принципу кирпичной стены.

Сегодня мы научимся делать динамичную сетку (пример) и настраивать ее согласно нашим потребностям.

Для начала давайте подключим саму библиотеку, сам JavaScript. Библиотеку мы можем подключить с стороннего сервера

или загрузить скрипт к себе на сервер (ссылки на загрузку в конце статьи) и подключить его таким способом

Теперь напишем разметку нашей будущей сетки

а так же стили CSS. Не будем чего либо усложнять, просто зададим размер и фон блока

После того как мы подключили скрипты, написали разметку и стили к ней, нам нужна инициализировать наш скрипт и указать необходимы настройки. Для этого в самом низу страницы, до закрывающего тега </body>, пишем следующее

В результате наших действий, мы получаем рабочий каскад сетки с блоками, которые выстраиваются по принципу кирпичной кладки и меняют свое положение при изменении размера окна браузера или контейнера с блоками.

Мы можем задать настройки для нашей сетки, то по каком принципу и как будут выстраиваться наши кирпичики, наши блоки. Настройки следует указывать через запятую, вот пример того, как они должны выглядеть

список настроек не маленький, на этой странице вы найдете все доступные настройки с примерами и объяснениями.

Если вам что-то не понятно и у вас остались вопросы, то я приглашаю вас в комментарии.

Источник
Демо
Скачать

Добавить комментарий

Авторизация
*
*
Войти с помощью: 
Генерация пароля