Foros del Web » Creando para Internet » CSS »

masonry layout sin jquery?

Estas en el tema de masonry layout sin jquery? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/11/2014, 00:25
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 2 meses
Puntos: 0
masonry layout sin jquery?

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
  #2 (permalink)  
Antiguo 28/11/2014, 19:50
 
Fecha de Ingreso: septiembre-2012
Mensajes: 74
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: masonry layout sin jquery?

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 =)
  #3 (permalink)  
Antiguo 01/12/2014, 00:45
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: masonry layout sin jquery?

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.
  #4 (permalink)  
Antiguo 01/12/2014, 13:46
 
Fecha de Ingreso: septiembre-2012
Mensajes: 74
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: masonry layout sin jquery?

Cita:
Iniciado por jhz1983 Ver Mensaje
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...
  #5 (permalink)  
Antiguo 01/12/2014, 20:24
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: masonry layout sin jquery?

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
  #6 (permalink)  
Antiguo 02/12/2014, 02:10
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: masonry layout sin jquery?

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:
Ver original
  1. .cuerpo {
  2.     border: 2px black solid;
  3.    
  4.    
  5.     display: -webkit-flex;
  6.    display: -ms-flexbox;
  7.    display: flex;
  8.    flex-direction: column;
  9.    align-items: flex-start;
  10.    flex-wrap: wrap;
  11.    max-height:1500px;
  12.    max-width:80%;
  13.    width:100%;
  14.    margin: 0 auto;
  15.       }
  16.  
  17.  
  18.  
  19. .item {
  20.     width: 30%;
  21.     margin:1%;
  22.     border: 2px solid black;
  23.  
  24.     }
  25.    
  26. .item img { width:100%;}

Última edición por jhz1983; 02/12/2014 a las 02:36
  #7 (permalink)  
Antiguo 02/12/2014, 11:16
 
Fecha de Ingreso: septiembre-2012
Mensajes: 74
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: masonry layout sin jquery?

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

http://w3bits.com/demo/css-masonry/
  #8 (permalink)  
Antiguo 03/12/2014, 05:55
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 2 meses
Puntos: 0
Respuesta: masonry layout sin jquery?

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?


Etiquetas: layout
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:42.