Construire des dispositions de grille triables réactives avec ce script

Grilles personnalisées sont parmi les fonctionnalités les plus difficiles à créer à partir de zéro. Vous pouvez trouver beaucoup de plugins de maçonnerie mais ils chacun a ses propres limites et exigences.

le Script Muuri est une alternative forte pour quiconque a besoin éléments de grille triables et réactifs avec prise en charge tactile.

Il est construit sur Velocity.js pour les animations, avec le Bibliothèque Hammer.js pour la manipulation mobile touch. Muuri ne fait pas nécessite jQuery, il est donc l'un des rares plug-ins JavaScript JavaScript pour les interfaces de grille.

Sur la page principale du projet, vous trouverez un belle démo de grille avec toutes les fonctionnalités. Effets d'animation, prise en charge du glisser-déposer et différents éléments de la grille de différentes tailles. Cette démo montre à quel point vous contrôlez avec une grille de Muuri.

Tu peux choisir quels éléments afficher, basé sur des classes (c'est-à-dire le filtrage), avec comment vous voulez remplir les espaces vides.

Les grilles de maçonnerie laissent souvent des endroits vides parce que les éléments de la grille ne s'emboîtent pas toujours parfaitement. C'est assez typique pour les grands sites tels que Pinterest. Bien que vous puissiez ajouter des éléments de grille déplaçables à peu près toute interface contrôlée par l'utilisateur.

Penser à profils sociaux avec des dispositions widgetized et comment ils travailleraient. Ou pensez à listes de tâches personnalisées s'exécutant en tant qu'applications Web progressives sur JavaScript. Il y a en fait une excellente démo sur la page Muuri qui présente un exemple de liste de tâches à faire et comment cela pourrait fonctionner en tant que PWA sur mobile.

Pour commencer, vous venez inclure toutes les dépendances JavaScript, ainsi que les scripts Muuri. Vous pouvez les télécharger via npm ou en récupérer une copie sur le dépôt GitHub..

Alors vous créer un élément de grille de conteneur et cibler avec une nouvelle instance du Muuri () méthode. C'est très simple et particulièrement facile à utiliser en copiant les extraits de code du dépôt GitHub..

Avec prise en charge complète de tous les navigateurs modernes (IE9 +) et interface tactile, ce plugin est l’un des meilleurs pour les fonctionnalités de grille par glisser / déposer.

Apprenez-en plus en lisant la page d'accueil de Muuri et en bricolant avec les démonstrations en direct. C'est un excellent système pour les grilles dynamiques et son toujours en développement actif, de sorte que vous pouvez faire confiance à ce plugin va être autour pour le long terme.