¿Es posible crear un diseño tipo pinterest solo con Bootstrap?

Estoy tratando de entender esto desde hace bastante tiempo:

¿Es posible crear un diseño de pinterest solo con Twitter Bootstrap? Sé que hay plugins jQuery como Masonry, pero ¿hay forma sin ellos?

Gracias

Encontré una plantilla (gratuita) en http://bragthemes.com/demo/pinstrap/ . Se supone que tiene todo lo que estás pidiendo. Aunque no he tenido tiempo de echarle un vistazo.

Editar 2016-03-15 : Bootstrap 4 permite esto de la caja aquí . Todavía está en alfa, pero estamos llegando allí.

Encontré esta solución, funciona dentro de bootstrap (funciona incluso sin definir tamaños de columna), no requiere javascript, lo inserté en un proyecto y funciona muy bien:

http://www.bootply.com/118335

¡Te bendigo @katiejones !

EDITAR: Esto está ahora fuera de la caja en boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns

Cosa segura. Me llevó un tiempo entrenar. ¡Espero que esto ayude!

Disculpas por el volcado de código, pero es necesario para mostrar el funcionamiento de la grilla.

           

Thumbnail label

Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Thumbnail label

Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit.

Sí, es posible pero con algunas limitaciones.

Principio

  • Cada columna es un div (o section depende del significado de su diseño)
  • Dentro de cada columna, cada tesela también es un div , o img etc., dependiendo de su diseño.

Práctica

Para hacer las columnas puede usar las siguientes técnicas:

  • float las columnas
  • display: inline-block las columnas
  • Utilice la nueva API de caja flexible (las implementaciones no estándar se están infiltrando en los navegadores modernos)
  • Use la nueva API de posicionamiento de la grilla (aunque evitaría esto por ahora ya que no es compatible en absoluto)

Luego coloque varios mosaicos ( div s) en cada columna. Nuevamente, dependiendo de su diseño / diseño, puede reemplazar los divisores de columna con ul s, y tener una lista de mosaicos ( li s). No puedo decir si eso es semánticamente correcto para su diseño.

Limitaciones

  • Cambiar el tamaño de la página de Pinterest mantiene la posición general de la mayoría de los elementos, es decir, los elementos en la parte superior de una columna generalmente se mantienen cerca de la parte superior, incluso cuando el número de columnas se ajusta según el ancho del navegador; la solución pura de CSS no lo hará caja .

Enfrentamientos

  • Si bien no es una solución perfecta, puede utilizar consultas de medios para influir en la posición de varios elementos.

Con el tiempo, uno podría acercarse bastante al diseño de Pinterest. Dicho esto, es probable que haya una buena razón por la que eligieron implementar dicho diseño con JavaScript.

Sé que mi respuesta es tarde. pero solo quería que esta pregunta común fuera actualizada. Descubrí 3 implementaciones más recientes.

  • isótopo . Encontré esto en el sitio web bootstrap. Funciona bien con infinite-scroll para crear infinitas páginas web de desplazamiento también.
  • Salvattore . Esto se logra con CSS y JS puros. JS solo se usa para extraer datos.
  • masonry.desandro.com . Esta es una implementación intensiva de JS. pero tiene sus propias características.

Ahí tenemos un material llamado: bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/

Pero, de hecho, este complemento no necesita bootstrap ya que se trata de dependencias. Depende de si quieres usar bootstrap como marcas de tu pin o solo tienes que diseñarlo tú mismo.

 
Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Para todos los que no quieran pasar por la molestia de la compatibilidad con navegadores cruzados, aquí hay una solución de PHP. Suponiendo que tiene sus datos en una matriz,

 < ?php $iColumns = 4;?> < ?php for($i=0; $i < $iColumns; ++$i):?> 
< ?php $j=$i; while( isset( $aData[$j] ) ): $oItem = $aData[$j] ?>

title

caption

< ?php $j=$j+$iColumns; endwhile;?>
< ?php endfor;?>