Salvattore se promociona a sí mismo como una alternativa de jQuery Masonry con una diferencia importante: utiliza la configuración de CSS en lugar de JavaScript. Este tipo de cuadrículas se pueden ver en toda la web, probablemente la más famosa en Pinterest..
Hoy, usaremos Salvattore en combinación con Twitter Bootstrap 3 para crear una estructura de rejilla fluida con una capacidad de respuesta impresionante..
Primero, deberás tomar la biblioteca de JavaScript de Salvattore (minified o source). A continuación, querrás vincular el CSS de Bootstrap de Twitter. En lugar de descargar y alojar nuestra propia copia, la tomaremos prestada directamente de BootstrapCDN de NetDNA..
Salvattore + Bootstrap
Una vez que se haya completado, estará listo para comenzar a configurar Salvattore.!
A continuación, necesitará una hoja de estilo externa o una etiqueta en su encabezado. La mayor parte de nuestro trabajo se realizará en la hoja de estilo..
Nota: debes incluir tipo
y rel
Atributos para que Salvattore funcione correctamente..
Twitter Bootstrap proporciona una estructura de cuadrícula potente y flexible que se centra en consultas de medios de abajo hacia arriba. Echemos un vistazo a una fila común de columnas.
Notarás en el marcado anterior el patrón de col- [tamaño] - [número de columna]
. Con tamaños disponibles de xs
, sm
,Maryland
, y lg
, Podemos establecer diferentes tamaños de columna para diferentes puntos de interrupción sin escribir consultas de medios específicas. Eche un vistazo a este ejemplo que muestra cómo se desplazan las columnas a diferentes anchos de pantalla.
Crearemos una cuadrícula fluida utilizando el componente del panel de Bootstrap. El marcado para crear el panel se construye así:
Encabezado del panel sin títuloContenido del panel
Ahora que tenemos las piezas de Bootstrap que necesitamos, las juntaremos con Salvattore. Por ahora, comenzaremos con seis paneles vacíos; Más adelante, haremos que todo sea dinámico para darle a cada panel algo de contenido..
Para que Salvattore funcione correctamente, nuestro contenedor de red necesita un columnas de datos
atributo. Aquí es cómo se ve nuestro marcado actualmente:
Encabezado del panel sin títuloContenido del panel
A continuación, iremos a nuestra hoja de estilo y agregaremos las siguientes etiquetas a través de pseudo-elementos:
Pantalla de @media y (ancho mínimo: 1 px) y (ancho máximo: 767 px) #columns [columnas de datos] :: antes de contenido: '2 .col-xs-6'; @media screen y (min-width: 768px) y (max-width: 991px) #columns [data-columns] :: before content: '3 .col-sm-4'; @media screen y (min-width: 992px) y (max-width: 9999px) #columns [data-columns] :: before content: '4 .col-md-3';
Los puntos de interrupción que hemos elegido se asignan directamente a las consultas de medios de Bootstrap. Salvattore usa el::antes de
pseudo-elemento y contenido
atributo para definir las clases de las columnas creadas, y luego intenta dividir los elementos uniformemente en esas columnas.
Hasta ahora hemos mantenido el contenido estrictamente dentro de CSS, pero si quieres hacer un esfuerzo adicional, JavaScript puede ofrecerte algunas cosas.
Salvattore lleva las cosas un paso más allá al ofrecer una funcionalidad anexa. Con estas funciones y una conexión a una API (estamos usando la API de libros de Google para extraer libros de Ernest Hemingway), podemos construir una cuadrícula dinámica. Aquí está el JavaScript que usaremos:
función append (título, contenido) // crear / seleccionar nuestros elementos var grid = $ ('# columnas') [0]; var item = document.createElement ('div'); // construir el html var h = ''; h + = ''; salvattore ['append_elements'] (cuadrícula, [elemento]) item.outerHTML = h; $ .getJSON ("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function (data) $ (data.items) .each (function (i , book) append (book.volumeInfo.title, book.volumeInfo.description);););'; h + = título; h + = ''; h + = ''; h + = contenido; h + = ''; h + = '
Nota: jQuery Required
Primero creamos un adjuntar
función que toma nuestro título y contenido, y los envuelve en nuestra marca de panel. Entonces usamos el salvattore ['append_elements'] (cuadrícula, [elemento])
Función para agregar el elemento a nuestra cuadrícula. Finalmente, ejecutamos la llamada AJAX para extraer los datos dinámicos..
Para que esto funcione correctamente, querremos eliminar todos los contenidos en el soporte de la cuadrícula.
Salvattore llenará las columnas por nosotros..
Nuestro marcado final se ve así:
Libros de Ernest Hemingway
Salvattore hace que la creación de cuadrículas dinámicas de estilo de mampostería sea muy fácil para alguien que no sabe mucho JavaScript. Dicho esto, con una pequeña cantidad de JavaScript, crear grillas dinámicas junto con contenido dinámico es muy fácil. Por último, Bootstrap proporciona una estructura de nombres de clase flexible para construir cuadrículas fácilmente para cualquier punto de ruptura.