Hacer un mosaico/galería con HTML y CSS

Un mosaico o galería de imágenes es un elemento básico que utilizado en multitud de aplicaciones web:

galería de fotos de Picasa

Esta distribución de elementos es muy sencilla de realizar con HTML y CSS. Vamos a ver a continuación algunos ejemplos y algunas de las particularidades que nos podemos encontrar.

El ejemplo que vamos a hacer va a ser el siguiente:

Siempre vamos a tener un contenedor, que en la imagen anterior vemos con un borde punteado, dentro del cual que colocan los elementos.

Los elementos pueden ser cualquier cosa, desde una simple imagen, como en la galería de Picasa, hasta un div conteniendo textos, imágenes y otros div's interiores, como en la galería de películas de Youzee:

En nuestro ejemplo el elemento es un div con otro div interno, con los bordes redondeados hasta hacer un círculo, y un número. Como el contenido del elemento no es importante para este tutorial, simplemente lo representaremos como:

1

El HTML para nuestros 8 elementos sería:

1
2
3
4
5
6
7
8

No tiene ninguna dificultad, es un div contenedor envolviendo a los elementos que formarán la galería. También es muy común ver esta misma estructura con una lista <ul> como contenedor y los items <li> de la lista como elementos. Lo veremos más adelante.

Con lo que realmente construimos la galería es con el CSS:

#container {
  border: 1px dotted black;
  overflow: hidden;
  width: 450px;
}

.element {
  width: 100px;
  height: 150px;
  float: left;
  margin : 5px;
}

Lo más importante en estas pocas líneas de CSS es que los elementos tienen float: left. Esto es lo que hace que se coloquen como un mosaico. El hecho de que sean float nos obliga a poner overflow:hidden en el contenedor para que los envuelva y no se quede vacío (aunque hay otras soluciones ).

El margin de 5px de los elementos sirve para que no queden pegados y tengan esa pequeña separación entre ellos, tanto por arriba como a los lados.

También vemos que hemos dado una anchura fija al contenedor para que quepan justo cuatro elementos, pero no tiene que ser necesariamente así. Es una galería autoajustable y podemos dejarlo sin anchura fija para que ocupe todo el ancho disponible, los elementos se redistribuirán automáticamente:

Podemos fijar una anchura mínima y/o máxima para que se quede siempre dentro de unos márgenes aceptables para el diseño gráfico de nuestra aplicación:

#container {
  border: 1px dotted black;
  overflow: hidden;
  min-width: 230px;
  max-width: 700px;
}

Con los valores anteriores conseguimos que el diseño sea líquido pero que nunca se expanda más de seis columnas ( con sus respectivos márgenes ) o se contraiga hasta contener menos de dos columnas.

También podríamos utilizar display: inline-block para los elementos, pero presenta un pequeño inconveniente cuando tenemos que hacer diseños con unas especificaciones muy concretas (márgenes, dimensiones, etc). El problema es que dejan un pequeño margen extra entre elementos. Esto lo veremos más detalladamente en otra entrada.

Utilizando una lista

Como hemos comentado antes, se puede utilizar una lista para hacer la galería. Algunos programadores argumentan que el HTML resultante es más semántico, aunque tengo mis dudas sobre este punto.

El código es muy parecido al anterior. El HTML sería:

1
2
3
4
5
6
7
8

Y el CSS:

#container {
  border: 1px dotted black;
  overflow: hidden;
  width: 450px;
  padding: 0px;

}

.element {
  list-style: none;
  width: 100px;
  height: 150px;
  float: left;
  margin : 5px;
}

El CSS tiene dos novedades importantes. Primero tenemos que resetear el padding de nuestra lista <ul>, con el id #container, porque algunos navegadores fijan un padding izquierdo por defecto que haría que el mosaico quedara un poco desplazado a la derecha.

El segundo detalle a tener en cuenta es que tenemos que eliminar el 'disco' que normalmente tienen a la izquierda los elementos de una lista. Para esto hacemos list-style: none.

El resultado es el mismo que en el ejemplo anterior.

¿Por qué se necesitan paréntesis para hacer eval() de JSON?

Como vimos en otra entrada, cuando recibimos un JSON tenemos que hacer que el motor de JavaScript lo interprete para convertir el string en objetos JavaScript nativos. Una forma de hacer esto ( poco recomendable, ver el tutorial ) es utilizar la función eval():

eval (‘(‘ + myJsonString + ‘)’ );

Como vemos en el ejemplo, para asegurarnos de que el código se evalúa correctamente es necesario añadir unos paréntesis que lo envuelvan. La razón es que cuando evaluamos cualquier string se lo estamos pasando al parser de JavaScript para que lo interprete. Cuando el parser encuentra una llave ‘{’ al principio de una instrucción lo interpreta como el inicio de un bloque, no como el inicio de un objeto.

Normalmente, en un código JavaScript, un objeto no aparece aislado, sino como parte de una expresión:

var test = { name: “Pepe”};

La llave no está al principio. Cuando se encuentra al principio el parser espera un bloque de instrucciones:

{
    var one = 1;
    var two = “dos”;
    myFunction();
}

Al esperar un conjunto de instrucciones y encontrarse con algo del tipo:

“clave1”:  valor1,
“clave2”:  valor2

lanzará un error. Es símplemente la forma en la que funciona el parser al interpretar un código JavaScript.

Para evitar que se tome como bloque y se evalúe correctamente, debemos hacer que el objeto forme parte de una expresión. Lo podemos conseguir simplemente encerrándolo entre paréntesis:

( { “name” : “Pepe”} )

Después de encontrar un paréntesis el parser evalúa la llave ‘{‘ como el comienzo de un objeto literal, que es lo que necesitamos.