Crear diseños de cuadrícula de mampostería rápida con Bricks.js
Siempre ha sido bastante simple crear grillas con jQuery, Usando plugins y tutoriales gratuitos de desarrolladores..
Sin embargo, las rejillas de mampostería son más difíciles de construir, ya que no caben uniformemente en toda la página. Tendrás anchos de tamaño fijo para columnas pero el Las alturas de los objetos pueden variar enormemente..
Hacer un rejilla de mampostería de píxeles perfectos necesitas un plugin como Ladrillos.js.
Este plugin es totalmente de código abierto y ridículamente rápido. Va a Rinda la rejilla en menos de medio segundo., incluso con docenas de artículos en la página.
La mayoría de las personas reconocen las rejillas de mampostería de Pinterest ya que popularizaron el diseño. Pero, desde entonces ha crecido para ser utilizado en muchos otros sitios web, también.
Para comenzar con Bricks.js, necesitarás algo de contenido y un diseño de página predeterminado. Instala el complemento directamente desde npm o mediante GitHub si eso es más fácil.
Con la configuración inicial, pasas tres parámetros específicos:
- Envase - una Elemento contenedor DOM para la red
- Lleno - un atributo Eso determina cómo fluyen los elementos en la cuadrícula.
- Tamaños - un matriz de anchos y canalones, definido en píxeles
El complemento utiliza todos estos valores para automatizar la red de mampostería desde cero.
Y, incluso puedes usalo para carga infinita Si quieres grillas de mampostería que funcionan igual que Pinterest.
Echa un vistazo a la página de demostración para una cuadrícula interactiva que puedes alterar para probar. Tú Definir el número total de elementos. y automatizará el proceso mientras muestra el tiempo total de renderizado.
Por ejemplo, he probado una cuadrícula con 500 elementos y solo tomó 13 milisegundos completar. Esto no tiene en cuenta el tiempo para cargar las 500 imágenes, pero 13 ms para una grilla autogenerada es muy impresionante.
Comience usted mismo descargando los archivos de GitHub y siguiendo las instrucciones de instalación. Esto puede parecer confuso al principio, pero cuanto más juegues con él, más fácil será configurar..
