Créez des dispositions de grille de maçonnerie rapides avec Bricks.js

Il a toujours été assez simple de créer des grilles avec jQuery, utiliser des plugins et des tutoriels gratuits de développeurs.

Cependant, les grilles de maçonnerie sont plus difficiles à construire, car ne s'adapte pas uniformément sur la page. Vous aurez des largeurs fixes pour les colonnes mais le la hauteur des articles peut varier énormément.

Faire un grille de maçonnerie parfaite en pixels vous avez besoin d'un plugin tel que Bricks.js.

Ce plugin est totalement open-source et ridiculement rapide. Ça va rendre la grille en moins d'une demi-seconde, même avec des dizaines d'objets sur la page.

La plupart des gens reconnaissent les grilles de maçonnerie de Pinterest depuis qu'ils ont popularisé la mise en page. Mais, il a depuis grandi pour devenir utilisé dans beaucoup d'autres sites, aussi.

Pour démarrer avec Bricks.js, vous aurez besoin de un peu de contenu et un mise en page par défaut. Vous installez le plugin directement à partir de NPM ou via GitHub si cela est plus facile.

Avec la configuration initiale, vous passez trois paramètres spécifiques:

1. Récipient - une Élément conteneur DOM pour la grille
2. Emballé - un attribut qui détermine la manière dont les éléments circulent dans la grille
3. Tailles - un tableau de largeurs et de gouttières, défini en pixels

Le plugin utilise toutes ces valeurs pour automatiser la grille de maçonnerie à partir de zéro.

Et vous pouvez même utilisez-le pour un chargement infini si vous voulez des grilles de maçonnerie qui fonctionnent comme Pinterest.

Consultez la page de démonstration pour un grille interactive que vous pouvez modifier pour tester. Vous définir le nombre total d'éléments et ça va automatiser le processus tout en affichant le temps total de rendu.

Par exemple, j'ai testé une grille avec 500 éléments et il n'a fallu que 13 millisecondes compléter. Cela ne prend pas en compte le temps nécessaire au chargement des 500 images, mais 13 ms pour une grille générée automatiquement est très impressionnant.

Commencez vous-même en téléchargeant les fichiers à partir de GitHub et en suivant les instructions d'installation. Cela peut sembler déroutant au début, mais plus vous en jouez, plus il est facile de le configurer..