masonry layout sin jquery?

[jhz1983]

tengo un pequeño web en el que me gustaria usar algo parecido al masonry.. pero me gustaria hacerlo sin css.. antes de nada me gustaria saber que pros y contras... puede tener esto... la verdad que estos temas me llevan loco asi que acepto cualquier tipo de ayuda, link , consejo, muchas gracias y un saludo

[waltersele]

Hola jhz1983, ¿ Qué tal ?

En el título dices que no quieres jQuery, y en la descripción que no quieres CSS.. Supondré que en la descripción te equivocaste, si no es así, corrigeme y rectifico =).

Supongo que no quieres utilizar jQuery por optimización y estás en lo cierto, para hacer algo como lo que pides, no es necesario usar un plugin ni cargar jQuery, con unas lineas de css lo podemos hacer y además hacerlo responsive.

Has oído hablar de display:flex ?

Aquí te dejo un ejemplo en codepen( El css está en .SCSS ) espero te ayude a darte cuenta de la cantidad de posibilidades que te brinda este gran display! ah, y atento a las compatibilidades con navegadores, debes poner prefixers para que funcione correctamente,

http://codepen.io/Wakkos/pen/zxxomX

Un saludo =)

[jhz1983]

una cosa más ... las imagenes que tengo son diferentes largos y anchos y me preguntaba si puede influir en algo al hacer algo asi... al tamaño que las redimensioné para que las cuadre bien.. igual es una tonteria mia.. pero no lo tengo muy claro.

[waltersele]

Iniciado por jhz1983

una cosa más ... las imagenes que tengo son diferentes largos y anchos y me preguntaba si puede influir en algo al hacer algo asi... al tamaño que las redimensioné para que las cuadre bien.. igual es una tonteria mia.. pero no lo tengo muy claro.

Con un max no tendría que haber problema de q se salgan de las cajas...

[jhz1983]

hola otra vez ! he estado probando cosas.. pero aún no consigo que funcione como quiero...

os dejo una imagen.. como vereis me deja espacios en blanco.. para equilibrar las columnas...

y al reducir la pantalla... sigo teniendo 3 columnas.. supongo que con 1 media query que pase a 1 columna ya esta..

pero lo de los espacios no veo muy claro como solucionarlo..



alguna ayuda?

este el código que he usado :

Código:

.cuerpo { 
	border: 2px black solid;
	
	
	display: -webkit-flex;
   display: -ms-flexbox;
   display: inline-flex;
      }

.colu { display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 33%;}


.item { 
	margin:1%;
	border: 2px solid black;
	-webkit-flex: 2 1 auto;
	    -ms-flex: 2 1 auto;
	        flex: 2 1 auto;
	flex-shrink: 1;
	flex-grow: 1;
	} 
	
.item img { width:100%;}

una última duda.. con el flex-wrap: wrap y el flex-direction:column no deberia crearme el solo varias columnas ? porque las he tenido que crear yo con .colu sino sólo me imprimia una columna

[jhz1983]

bueno he solucionado en parte... el problemo ... ahora no me deja espacios en blanco.. pero.. los items... sobrepasan el contenedor... por abajo.... argg...

el codigo css :

Código CSS:

.cuerpo { 
    border: 2px black solid;
    
    
    display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex-wrap: wrap;
   max-height:1500px;
   max-width:80%;
   width:100%;
   margin: 0 auto;
      }
 
 
 
.item { 
    width: 30%;
    margin:1%;
    border: 2px solid black;
 
    } 
    
.item img { width:100%;}
 

[waltersele]

Aquñi te dehi un ejemplo ya hecho, creo que es exactamente lo que necesitas.

http://w3bits.com/demo/css-masonry/

[jhz1983]

me gusta lo que estoy consiguiendo.. ahora al final me deja un espacio en blanco feote...
Seria mucha complicación intentar que cuadre al máximo? como podria hacerlo? se me ocurre ... con php hacer una consulta extra si detecta espacios vacios(ahora no se muy bien como decirle a php que si hay espacios vacios haga una consulta...) y cargar algunas imagenes más... pero igual es sobrecargar... de consultas la bbdd ... alguna solución viable?