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.

< View plain text >
HTML

  1. <!-- Incluimos jQuery -->
  2. <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  3. <!-- Incluimos Bootstrap -->
  4. <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script><!-- Incluimos Masonry --><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.0.0/masonry.pkgd.js"></script>
  5. <!-- Esta librería nos ayudara a crear imágenes placeholder para nuestro demo -->
  6. <script type="text/javascript" src="holder.js"></script><!-- Esta última librería es un complemento no requerido pero a veces indispensable para Masonry --><script type="text/javascript" src="imagesloaded.pkgd.min.js"></script>

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í:

< View plain text >
HTML

  1. <div id="posts" class="container">
  2.     <div class="col-sm-5 col-md-3 post">
  3.       <div class="thumbnail"> <img alt="..." width="300" height="200" data-src="holder.js/300x200" />
  4.         <div class="caption">
  5.           <h3>Thumbnail label</h3>
  6.           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. <a class="btn btn-primary" href="#">Button</a> <a class="btn btn-default" href="#">Button</a> </div>
  7.       </div>
  8.     </div>
  9.     ...
  10.  
  11. </div>

 

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:

< View plain text >
css

  1. .container {
  2.   padding-left:0; padding-right:0
  3. }
  4.  
  5. .btn {
  6.     display: inline-block;
  7.     margin-bottom: 0;
  8.     font-weight: 400;
  9.     text-align: center;
  10.     vertical-align: middle;
  11.     cursor: pointer;
  12.     background-image: none;
  13.     border: 1px solid transparent;
  14.     white-space: nowrap;
  15.     padding: 6px 12px;
  16.     font-size: 14px;
  17.     line-height: 1.42857143;
  18.     border-radius: 4px;
  19.     -webkit-user-select: none;
  20.     -moz-user-select: none;
  21.     -ms-user-select: none;
  22.     user-select: none;
  23. }
  24. .btn-default {
  25.     color: #333;
  26.     background-color: #fff;
  27.     border-color: #ccc;
  28. }
  29.  
  30. .btn-primary {
  31.     color: #fff;
  32.     background-color: #428bca;
  33.     border-color: #357ebd;
  34. }
  35.  
  36.  
  37. .thumbnail {
  38.     display: block;
  39.     padding: 4px;
  40.     line-height: 1.42857143;
  41.     background-color: #fff;
  42.     border: 1px solid #ddd;
  43.     border-radius: 4px;
  44.     -webkit-transition: all .2s ease-in-out;
  45.     transition: all .2s ease-in-out;
  46. }

Y por ultimo el código jQuery:

< View plain text >
javascript

  1. <script language="javascript">
  2.  
  3.     jQuery(document).ready(function(){
  4.     var gutter = parseInt( jQuery( '.post' ).css( 'marginBottom' ) );
  5.     var container = jQuery( '#posts' );
  6.     // Creates an instance of Masonry on #posts
  7.     container.imagesLoaded( function() {
  8.         container.masonry({
  9.             itemSelector: '.post',
  10.             columnWidth: '.post'
  11.         });
  12.     });
  13.        
  14.            
  15.     });
  16.  
  17. </script>

Y con esto todo en conjunto hemos logrado esto:

Pueden ver el demo dando click aquí.

O descargar el código aquí.