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

Cuadrículas personalizadas Son algunas de las características más difíciles de crear desde cero. Usted puede encontrar un montón de complementos de rejilla de mampostería pero Cada uno tiene sus propias limitaciones y requisitos..

los Guion muuri Es una alternativa fuerte para quien la necesite. Elementos de rejilla clasificables y sensibles con soporte táctil.

Esta construido sobre Velocity.js para las animaciones., junto con Hammer.js biblioteca para el manejo de toque móvil. Muuri no requiere jQuery, por lo que es uno de los pocos complementos de vainilla de JavaScript para interfaces de red.

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

Tu puedes elegir qué elementos mostrar, basado en clases (es decir, filtrado), junto con como quieres llenar espacios vacios.

Las rejillas de mampostería a menudo dejan espacios vacíos porque Los elementos de la rejilla no siempre encajan perfectamente. Esto es bastante típico de sitios web más grandes como Pinterest. Aunque puedes agregar elementos de la rejilla arrastrables a casi cualquier interfaz controlada por el usuario.

Pensar en Perfiles sociales con diseños widgetizados. y como iban a funcionar. O piensa en listas de tareas personalizadas que se ejecutan como aplicaciones web progresivas en JavaScript. En realidad, hay una gran demostración de esto en la página de Muuri que muestra una lista de tareas pendientes y cómo podría funcionar como PWA en dispositivos móviles..

Para empezar, solo tienes que incluye todas las dependencias de JavaScript, junto con los scripts de Muuri. Puede bajarlos a través de npm o obtener una copia del repositorio de GitHub..

Entonces tú crear un elemento de rejilla de contenedor y objetivo que con una nueva instancia de la Muuri () método. Es bastante simple y especialmente fácil de usar copiando los fragmentos de código del repositorio de GitHub..

Con Soporte completo para todos los navegadores modernos (IE9 +) y una interfaz táctil, Este complemento es uno de los mejores para las funciones de arrastrar y soltar la cuadrícula..

Obtenga más información leyendo la página de inicio de Muuri y jugueteando con las demostraciones en vivo. Esto es un Gran sistema para grillas dinámicas. y es todavía en desarrollo activo, por lo que puede confiar en que este plugin va a estar presente a largo plazo.