hideout-lastation.com
Créer des dispositions de grille de maçonnerie rapide avec Bricks.js
Il a toujours été assez simple de créer des grilles avec jQuery, en utilisant des plugins et des tutoriels gratuits de développeurs.
Cependant, les grilles de maçonnerie sont plus difficiles à construire, car elles ne s'adaptent pas uniformément sur la page . Vous aurez des largeurs de taille fixe pour les colonnes, mais les hauteurs des objets peuvent varier énormément .
Pour faire une grille de maçonnerie parfaite au pixel près, vous avez besoin d'un plugin tel que Bricks.js .
Ce plugin est totalement open-source et ridiculement rapide. Il va rendre la grille en moins d'une demi-seconde, même avec des dizaines d'éléments 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 être utilisé dans de nombreux autres sites, aussi.
Pour commencer avec Bricks.js, vous aurez besoin de contenu et d'une mise en page par défaut . Vous installez le plugin directement depuis npm ou via GitHub si c'est plus simple.
Avec la configuration initiale, vous passez trois paramètres spécifiques :
- Container - un élément de conteneur DOM pour la grille
- Emballé - un attribut qui détermine comment les éléments circulent dans la grille
- 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 l' utiliser pour un chargement infini si vous voulez des grilles de maçonnerie qui fonctionnent exactement comme Pinterest.
Consultez la page de démonstration pour une grille interactive que vous pouvez modifier pour le test. Vous définissez le nombre total d'éléments et automatisez le processus tout en affichant le temps total de rendu.Par exemple, j'ai testé une grille avec 500 éléments et cela n'a pris que 13 millisecondes à compléter. Cela ne tient pas compte du temps de chargement des 500 images, mais 13 ms pour une grille générée automatiquement est très impressionnant.
Commencez par vous-même en téléchargeant les fichiers de GitHub et en suivant les instructions d'installation. Cela peut sembler déroutant au début, mais plus vous jouez avec, plus il est facile de mettre en place.
Comment désactiver définitivement les sites Web dans Chrome Canary
Autoplaying vidéos ou audios sont assez communs sur internet que beaucoup considèrent, y compris moi-même, comme l'une des parties les plus ennuyeuses de l'Internet .Cependant, ces nuisances ne seront peut-être plus un problème dans un futur proche car Google cherche à implémenter une fonctionnalité de site Web muet dans son navigateur Chrome.Dans le
Copiez facilement des codes à partir de sites Web avec SnappySnippet
En tant que développeur Web, nous pouvons parfois trouver des éléments inspirants sur un site Web qui vous fait vous demander comment ils ont construit cette chose. Ensuite, vous penseriez à obtenir une copie de ce code. Chrome Devtools ainsi que Firebug de Firefox ont été livrés avec la fonctionnalité qui nous permet de copier facilement HTML et CSS sur un site Web.Toutefo
