Si has visto pinterest, que cuenta con una interfaz multi-columna para mostrar las imágenes muy bien, incluso si no son de la misma altura. Lo hacen mediante el uso de javascript para calcular la altura de cada columna y luego colocándolos con posición absoluta. Podemos lograr esto mismo con CSS y se puede hacer de dos maneras:
- Utilizando Float: podemos utilizar float pero solamente si todas las columnas tiene la misma altura, de lo contraria tendremos huecos por todos las partes
- Utilizando CSS3: este es lo que tenemos que utililzar y que explicaremos abajo.
Esta técnica es creada originalmente por pixleight y modificada un poco por cssdeck para que se vea y funcione mucho mejor. He aquí una cita de la creación original de cómo se hace.
</pre> <div id="columns"> <div class="pin"><img src="http://placekitten.com/400/300" alt="PlaceKitten" /> Jean shorts street art flexitarian ...</div> <div class="pin"><img src="http://placekitten.com/g/400/300" alt="PlaceKitten" /> Leggings pour-over banksy, DIY wolf tattooed ...</div> <div class="pin"><img src="http://placekitten.com/500/450" alt="PlaceKitten" /> Put a bird on it viral wolf, 3 wolf moon ...</div> <!-- and so on ... --></div> <pre>
Los estilos CSS son:
#columns {
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.pin {
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
display: inline-block;
margin: 0 2px 15px;
padding: 15px;
border: 2px solid #FAFAFA;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
background: #FEFEFE;
background-image: linear-gradient(45deg, #FFF, #F9F9F9);
}
Como puedes ver utilizar [highlight]colum-count: 3;[/highlight] en #columns para contar las columnas que utiliza (en este ejemplo son 3). Despues añade [highlight]column-break-inside: avoid;[/highlight] a la clase «pin» para evitar que fluya de una columna a la siguiente (detalles) obligando a que el contenido esté en una sola columna. Además debe de incluir los prefijos -moz y -webkit para los navegadores, [highlight]-moz-column-break-inside: avoid;[/highlight] [highlight] -webkit-column-break-inside: avoid;[/highlight]
Se pueden ajustar el número de columnas dependiendo de la anchura del navegador
@media all and (min-width: 960px) {
#columns {
column-count: 4;
}
}
@media all and (min-width: 1170px) {
#columns {
column-count: 5;
}
}
Esto no funciona con Internet Explorer 9 ni versiones anteriores. Puedes estudir el código fuente del ejemplo y probar como funciona.
