Comunidad de diseño web y desarrollo en internet online

Uso de Masonry en js

Citar            
MensajeEscrito el 21 Abr 2017 05:47 pm
Buenas. Tengo una web donde hay 2 columnas de noticias y varias filas. Cada noticia tiene una altura diferente y lo que quiero es que no haya espacios en blanco entre noticias, actualmente si la noticia 2 (primera fila derecha) es mayor que la 1 (primera fila izquierda) entre la fila 1 y la 3 (está debajo de la 1) hay un espacio en blanco. Intento aplicar masonry pero no me funciona, porque las noticias las cojo de un blog y las publico en la web mediante json. El código js de cómo cojo las noticias es el siguiente:

Código :

$(document).ready(function()
{
   $.ajax(
   {
           url: 'miblog.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);
           }
       });   
});


El css de cuadro_noticia simplemente tiene:
width:45%;
float:left;
margin-right:2%;

Gracias de antemano.
Saludos.

Por Francisco31

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 22 Abr 2017 08:31 am
puedes dejar tu web online para ver visualmente mejor cual es el problemo y te lo arreglo desde consola-browser

Por aukun

Claber

200 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.