CSS - Uso de Masonry algo complicado

   
Vista:

Uso de Masonry algo complicado

Publicado por Francisco (2 intervenciones) el 21/04/2017 18:22:22
Buenas tardes,

Les escribo porque estoy desesperado, no me sale lo que quiero hacer.

Dentro de la página web tengo una sección de noticias. Estas noticias se cogen con un js del feed de un blog. Digamos que el js es un bucle while que pone las noticias de la 1 a la 8. Cada noticia es un div. Las noticias deben salir de 2 en 2, es decir, como hay 8 noticias serían la 1 y 2 en la misma fila, luego la 3 y la 4, luego la 5 y la 6 y por último la 7 y la 8. Esto lo consigo con float left y con width:48%.

El problema viene porque cada noticia tiene un alto distinto, entonces si la noticia 2 es más alta que la1 no pasa nada y se alinean bien, pero si la 1 es más alta que la 2 la noticia 3 en vez de aparecer debajo de la 1 aparece debajo de la 2, dejando un espacio en blanco a la izquierda. Obviamente con clear podría solucionarlo, lo mismo que utilizando inline-block en lugar de float, pero el problema es que entonces si la noticia 1 es mayor que la 2, hay un espacio en blanco entre la noticia 2 y la 4, y si la noticia 2 es mayor que la 1, entonces hay un espacio en blanco entre la noticia 1 y la 3.

La primera solución que se me ocurrió es utilizar column-count y poner 2 columnas, el problema es que entonces saldrían la noticia 2 debajo de la 1, la 3 debajo de la 2....es decir, va de arriba a abajo pero no de izquierda a derecha.

Buscando soluciones di con masonry. Una página aseguraba que solo descargando el archivo masonry js y llamándolo desde la página poniendo algo así:

<script>
$(document).ready(function(){
$('#noticias_blog').masonry();
});
</script>

donde noticias_blog es el contenedor se solucionaría. Pero aunque yo veo en la inspección de cada noticia que se usa masonry no me soluciona el problema, sigue saliendo la noticia 3 debajo de la 2 en lugar de debajo de la 1.

HE probado métodos alternativos a masonry pero nada....yo creo que es porque las noticias se cogen con un js desde un bucle while, y no están establecidas como tal en el html.

Alguna solución?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Uso de Masonry algo complicado

Publicado por Francisco (2 intervenciones) el 21/04/2017 18:53:26
Para que veáis como funciona el js de noticias:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
$(document).ready(function()
{
	$.ajax(
	{
        	url: "blog.blogspot.com"
		type: 'get',
        	dataType: "jsonp",
        	success: function(data)
        	{
            		var posturl = "";
            		var htmlcode = '<ul>';
            		var newhtmlcode = '';
            		var tamano_imagen = 700;
            		var i = 0;
            		var count= 0;
			var fecha="";
            		while ((i < data.feed.entry.length) && (count<8))
            		{
	            		for (var j=0; j < data.feed.entry[i].link.length; j++)
	            		{
	                		if (data.feed.entry[i].link[j].rel == "alternate")
	                		{
	                    			posturl = data.feed.entry[i].link[j].href;
	                    			break;
	                		}
	            		}
 
	            		if("content" in data.feed.entry[i])
	            		{
	                		var postcontent = data.feed.entry[i].content.$t;
					if(typeof(data.feed.entry[i].media$thumbnail) != "undefined")
					{
	                			var miniatura = data.feed.entry[i].media$thumbnail.url;
						var miniatura = miniatura.replace('s72-c', 's'+ tamano_imagen);
					}
					else
					{
						var miniatura = "complementos/js/escudo.jpg";
					}
				}
				if("published" in data.feed.entry[i])
				{
					var date_published = data.feed.entry[i].published.$t;
					var fecha = date_published.split('T');
					var yyyy_mm_dd = fecha[0].split('-');
 
					var year = yyyy_mm_dd[0];
					var month = yyyy_mm_dd[1];
					var day = yyyy_mm_dd[2];
 
					switch (month)
					{
 
						case "01":
							mes="Enero";
							break;
						case "02":
							mes="Febrero";
							break;
						case "03":
							mes="Marzo";
							break;
						case "04":
							mes="Abril";
							break;
						case "05":
							mes="Mayo";
							break;
						case "06":
							mes="Junio";
							break;
						case "07":
							mes="Julio";
							break;
						case "08":
							mes="Agosto";
							break;
						case "09":
							mes="Septiembre";
							break;
						case "10":
							mes="Octubre";
							break;
						case "11":
							mes="Noviembre";
							break;
						case "12":
							var mes="Diciembre";
							break;
					}
 
					fecha = day + " de " + mes + " de " + year;
		  		}
	            		else if("summary" in data.feed.entry[i])
	            		{
	                		var postcontent = data.feed.entry[i].summary.$t;
	            		}
	            		else
	            		{
	                		var postcontent = "";
	            		}
	            		var re = /<\S[^>]*>/g;
	            		postcontent = postcontent.replace(re,"");
		    		var posttitle = data.feed.entry[i].title.$t;
	            		//reduce postcontent to 300 characters
	            		if(postcontent.length > 300)
	            		{
	                		postcontent = postcontent.substring(0,300);
					postcontent = postcontent+' ...';
	            		}
 
		    		htmlcode += '</ul>';
 
				newhtmlcode += 	"<div class='cuadro_noticia'>" +
							"<div class='foto_noticia'><img src='"+miniatura+"'></div>" +
							"<div class='titular'><h1><a target='_blank' href='"+posturl+"'>"+posttitle+"</a></h1></div>"+
							"<div class='fecha'>"+fecha+"</div>" +
							"<div class='contenido_noticia'><span>"+postcontent+"</span></div>"+
							"<div class='leer_mas'><a target='_blank' class='icono_leer_mas' href='"+posturl+"'>>>Leer más</a></div>"+
						"</div>";
 
				i++;
				count++;
			}
			$('.noticias_blog').append(newhtmlcode);
        	}
    	});
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar