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

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

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

Сделать точечная кладка сетки вам нужен плагин, такой как Bricks.js.

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

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

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

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

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

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

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

Проверьте демонстрационную страницу для интерактивная сетка что вы можете изменить для тестирования. Вы определить общее количество элементов и это будет автоматизировать процесс при отображении общего времени рендеринга.

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

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