Criar layouts de grade de alvenaria rápida com Bricks.js

Sempre foi bem simples criar grades com jQuery, usando plugins e tutoriais gratuitos de desenvolvedores.

No entanto, as grades de alvenaria são mais difíceis de construir, não se encaixa uniformemente na página. Você terá larguras de tamanho fixo para colunas, mas o alturas item podem variar descontroladamente.

Fazer um grade de alvenaria com pixels perfeitos você precisa de um plugin como Bricks.js.

Este plugin é totalmente open-source e é ridiculamente rápido. Vai renderizar a grade em menos de meio segundo, mesmo com dezenas de itens na página.

A maioria das pessoas reconhece as grades de alvenaria do Pinterest, uma vez que elas popularizaram o layout. Mas, desde então, cresceu para ser usado em muitos outros sites, também.

Para começar a usar o Bricks.js, você precisará algum conteúdo e um layout de página padrão. Você instala o plugin diretamente do npm ou do GitHub, se isso for mais fácil.

Com a configuração inicial, você passa três parâmetros específicos:

1. Recipiente - uma Elemento contêiner DOM para a grade
2. Embalado - a atributo que determina como os itens fluem na grade
3. Tamanhos - a matriz de larguras e calhas, definido em pixels

O plugin usa todos esses valores para automatizar a grade de alvenaria a partir do zero.

E você pode até use-o para carregamento infinito se você quiser grades de alvenaria que funcionam exatamente como o Pinterest.

Confira a página de demonstração para um grade interativa que você pode alterar para teste. Você definir o número total de elementos e vai automatizar o processo enquanto exibe o tempo total de renderização.

Por exemplo, eu testei uma grade com 500 elementos e levou apenas 13 milissegundos completar. Isso não leva em conta o tempo de carregamento de todas as 500 imagens, mas 13 ms para uma grade gerada automaticamente é muito impressionante.

Comece você mesmo baixando os arquivos do GitHub e seguindo as instruções de instalação. Isso pode parecer confuso no começo, mas quanto mais você brinca com ele, mais fácil é configurar.