Construir diseños de cuadrícula seleccionables con esta secuencia de comandos

Las cuadrículas personalizadas son algunas de las características más difíciles de crear desde cero. Puede encontrar muchos plugins de mampostería, pero cada uno tiene sus propias limitaciones y requisitos .

La secuencia de comandos Muuri es una alternativa fuerte para cualquier persona que necesite elementos de cuadrícula ordenables y receptivos con soporte táctil .

Se basa en Velocity.js para las animaciones, junto con la biblioteca Hammer.js para manejar el toque móvil . Muuri no requiere jQuery, por lo que es uno de los pocos complementos JavaScript de vanilla para interfaces de grillas.

En la página principal del proyecto, encontrará una hermosa demo de cuadrícula con todas las características . Efectos de animación, soporte de arrastrar y soltar, y diferentes elementos de cuadrícula de diferentes tamaños. Esta demo muestra cuánto control tienes con una grilla Muuri.

Puede elegir qué elementos mostrar, en función de las clases (es decir, el filtrado), junto con la forma en que desea completar espacios vacíos .

Las mallas de albañilería suelen dejar espacios vacíos porque los elementos de la cuadrícula no siempre se ajustan perfectamente . Esto es bastante típico para sitios web más grandes como Pinterest. Aunque puede agregar elementos de cuadrícula arrastrables a casi cualquier interfaz controlada por el usuario.

Piense en los perfiles sociales con diseños widgetizados y cómo funcionarían. O bien, piense en listas de tareas personalizadas que se ejecutan como aplicaciones web progresivas en JavaScript. De hecho, hay una gran demostración de esto en la página Muuri que muestra una lista de tareas para hacer y cómo podría funcionar como un PWA en el móvil.

Para comenzar, solo debe incluir todas las dependencias de JavaScript, junto con los scripts Muuri . Puede arrastrarlos hacia abajo a través de npm o tomar una copia del repositorio de GitHub.

A continuación, crea un elemento de cuadrícula contenedor y apunte eso con una nueva instancia del método Muuri() . Todo es bastante simple y especialmente fácil de usar al copiar los fragmentos de código del repositorio de GitHub.

Con soporte completo para todos los navegadores modernos (IE9 +) y una interfaz táctil, este plugin es uno de los mejores para las características de la cuadrícula de arrastrar y soltar.

Aprenda más leyendo la página de Muuri y jugando con las demostraciones en vivo. Este es un gran sistema para redes dinámicas y todavía está en desarrollo activo, por lo que puede confiar en que este complemento estará disponible a largo plazo.