Hacer una simple galería nunca fue tan fácil con estas dos grandiosas herramientas.

Para los que no conocen Bootstrap, es un Framework que nos permite desarrollar páginas web adaptables(Responsive Web), y que es Masonry?, Bueno es una librería que se basa en una cuadricula que nos permite acomodar elementos de la mejor manera posible y en el espacio disponible. La explicación del desarrollador nos dice que su librería se basa en como un albañil acomoda los ladrillos en una pared.

Bien!, después de tanto rollo ahora vamos a empezar con nuestra galería.

Lo primero que necesitamos es incluir las librerías que vamos a necesitar en el header.

[html]






[/html]

Les explico el por que el uso de la librería imagesloaded, cuando nuestra pagina carga por primera vez las imágenes se van cargando conforme el explorador las va detectando, esto puede causar conflicto ya que Masonry toma el ancho y el alto del elemento contenedor y si en el momento en que el script toma dichas medidas la imagen no ha sido cargada puede causar que los elementos se sobre monten o queden mal alineados.

Siguiendo con el tema, ahora tenemos que agregar nuestro codigo para la galería, Bootstrap 3 ya nos trae un componente llamado thumbnail, con ese componente y un poco de CSS vamos a lograr hacer una simple pero bonita galería.

El código quedaría algo así:
[html]

...

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Button Button

[/html]
 

Las clases container, col-sm-5 y col-md-3, thumbnail, btn, btn-primary y btn-default pertenecen a Bootstrap, la clase post pertenece a nuestra galería y el código se los pondré mas abajo. He modificado un poco las clases container, thumbnail, btn, btn-primary y btn-default.

Aqui el código CSS:
[css]
.container {
padding-left:0; padding-right:0
}

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
}

.thumbnail {
display: block;
padding: 4px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

[/css]
Y por ultimo el código jQuery:
[javascript]

[/javascript]
Y con esto todo en conjunto hemos logrado esto:

Pueden ver el demo dando click aquí.

O descargar el código aquí.