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?
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
0