Cómo crear los efectos de mampostería con solo bootstrap 3 grid system y css

Mi problema es que quiero mostrar los datos en un formato de bloque utilizando el sistema de grilla de bootstrap 3, pero no quiero los molestos espacios en blanco que suceden desde la altura restringida a la fila anterior. Por ejemplo, si lo hago:

post
longer post that is going to take more height than the others
post
post
post
post

entonces me quedarán espacios en blanco entre las dos filas, lo que estoy tratando de lograr es un efecto de mampostería (donde un post relleno se sienta cerca de la publicación de arriba) con solo usar CSS, específicamente el sistema de cuadrícula bootstrap 3. ES DECIR:

enter image description here

Sé que esto se puede hacer con complementos, pero quiero ver si hay una solución más pura (incluso si tiene que ser hacky). ¿Algunas ideas?

Hicimos esto en un sitio, y lo que hicimos fue poner la grilla en filas verticales.

Ejemplo:

 

En Bootstap, el elemento .row se usa para borrar flotantes de los bloques-div que contiene (en tu ejemplo col-lg-4 );

Por lo tanto, es básicamente imposible tener elementos en filas diferentes uno al lado del otro, es necesario que cambie el marcado;

Por otro lado, usar el sistema de columna de respuesta de bootstrap podría ser útil para crear un efecto de CSS-mampostería:
Puedes intentar colocar todos los “elementos de col” que quieras para que el efecto de mampostería esté dentro de una hilera , mostrando como bloque en línea (más tal vez algunos otros pequeños ajustes …) deberían hacer el truco (este es el camino a seguir para si estás atrapado solo con CSS …);

En conclusión, recuerde que Masonry nació y sigue siendo una biblioteca de diseño de cuadrícula de JavaScript, por lo que incluso si puede hacer que funcione con CSS, le sugiero que use JS.

mil gracias a Desandro por esta impresionante idea;

En Bootstrap 4 puede usar .card-columns , consulte aquí: https://v4-alpha.getbootstrap.com/components/card/

Aunque recomendaría usar isótopos ya que JS ofrece más control y mejor compatibilidad que CSS.

Hice una grilla de mampostería simple que recibe imágenes de DB, con solo css como este:

   .container { -moz-column-width: 35em; -webkit-column-width: 35em; -moz-column-gap: 1em; -webkit-column-gap:1em; } .image-gallerie { width: 100%; } .image-gallerie img{ width: 100%; height: 100%; margin-top: 15px; margin-bottom: 10px; }