Создавайте макеты быстрой кладки с помощью Bricks.js

Создавать сетки с помощью jQuery всегда было довольно просто, используя плагины и бесплатные учебные пособия от разработчиков.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Чтобы сделать пиксельную сетку, вам нужен плагин, такой как Bricks.js,

Этот плагин является полностью открытым исходным кодом и смехотворно быстрым. Он будет отображать сетку менее чем за полсекунды, даже с десятками элементов на странице.

Большинство людей узнают кладочные сетки из Pinterest, поскольку они популяризировали макет. Но с тех пор он стал использоваться и на многих других сайтах.

Чтобы начать работу с Bricks.js, вам потребуется контент и макет страницы по умолчанию. Вы устанавливаете плагин прямо с npm или через GitHub если так проще

При начальной настройке вы передаете три конкретных параметра:

  1. Контейнер – элемент контейнера DOM для сетки
  2. Упакованные – атрибут, который определяет, как элементы перемещаются в сетке
  3. Размеры – массив ширины и желоба, определенный в пикселях

Плагин использует все эти значения для автоматизации кладки сетки с нуля.

И вы даже можете использовать его для бесконечной загрузки, если вы хотите, чтобы сетка работала так же, как Pinterest.
Bricks.js упаковка jquery плагин кладкиПроверьте демонстрационная страница для интерактивной сетки, которую вы можете изменить для тестирования. Вы определяете общее количество элементов, и оно будет автоматизировать процесс при отображении общего времени рендеринга.

Например, я протестировал сетку с 500 элементами, и это заняло всего 13 миллисекунд. Это не влияет на время загрузки всех 500 изображений, но 13 мс для автоматически сгенерированной сетки очень впечатляет.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *