7

Quisiera crear algo como esto: https://www.apptrendit.com/

Pero quisiera crearlo mediante a bootstrap para hacerlo responsive, el problema es que las columnas tienen distintos tamaños y no van lineales como cuando uno trabaja las columnas en bootstrap, ¿Como puedo hacer esto?

Mi Intento: https://jsfiddle.net/370z66u2/

1

2 respuestas 2

6

Hasta donde yo se, en boostrap no es posible con css puro. En algún punto de la documentación dice algo así:

Si tu estas buscando presentar miñaturas al estilo Pinterest, donde estas son de distintas alturas y / o anchuras, tendrás que utilizar un plugin de terceros, tales como: Masonry, Isotope o Salvattore.

Ya que tienes distintas dimensiones en las imágenes te dejos un ejemplo utilizando Masonry, es una librería para hacer grillas que se auto organizan. Aquí tienes un ejemplo hecho con esta librería.

Para utilizar Masonry en tu fiddle debes:

Incluir JQuery y Masonry:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.js"></script>

Inicializar la grilla:

<script>
$('.grid').masonry({
  // options
  itemSelector: '.grid-item'
});
</script>

Aquí he modificado tu fiddle: https://jsfiddle.net/91ydtqy1/

9
  • esto es justo lo que buscaba! gracias! Commented el 6 feb. 2016 a las 13:19
  • lo intento utilizar pero de todas maneras me quedan espacios entre cada una y queda todo desordenado, mira como aquí puedes ver jsfiddle.net/370z66u2 Commented el 6 feb. 2016 a las 14:29
  • @DavidBazzingaJuggling acabo de editar la respuesta .... he dejado un fiddle. Commented el 6 feb. 2016 a las 14:46
  • o sea editaste el mismo fiddle o es otro? Commented el 6 feb. 2016 a las 14:49
  • ya lo vi!, increible! cual era el problema? Commented el 6 feb. 2016 a las 14:50
2

Puedes hacer algo parecido a lo que buscas con CSS puro usando column-count. Con column-count especificas en cuántas columnas quieres que se muestre el contenido de un elemento. Así, si les pones un ancho de 100% a los elementos, van a ocupar el 100% del ancho de la columna en lugar del 100% del ancho del contenedor.

Aquí puedes ver un ejemplo simple funcionando:

div {
  column-count: 3;  
}

div img {
  width: 100%;
}
<div id="container">
  <img src="https://placehold.it/300x200/ccc/666/?text=1" alt="" />
  <img src="https://placehold.it/100x200/ccc/666/?text=2" alt="" />
  <img src="https://placehold.it/400x200/ccc/666/?text=3" alt="" />
  <img src="https://placehold.it/300x300/ccc/666/?text=4" alt="" />
  <img src="https://placehold.it/200x100/ccc/666/?text=5" alt="" />
  <img src="https://placehold.it/350x200/ccc/666/?text=6" alt="" />
  <img src="https://placehold.it/300x250/ccc/666/?text=8" alt="" />
  <img src="https://placehold.it/500x500/ccc/666/?text=9" alt="" />
  <img src="https://placehold.it/500x200/ccc/666/?text=10" alt="" />
  <img src="https://placehold.it/150x200/ccc/666/?text=11" alt="" />
</div>

Dos inconvenientes de este método:

  1. No va a funcionar en versiones antiguas de IE (requiere IE10 o superior) y puede que necesites el prefijo de navegador para versiones antiguas de Chrome/Firefox.

  2. Los elementos se ordenan verticalmente (lo puedes ver en el ejemplo de arriba), si quieres que se ordenen de forma horizontal vas a tener que hacerlo antes de mostrarlos porque de momento no existe esa opción en CSS puro.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.