Jquery Problema de altura de mampostería

Question

Tengo una grilla de mampostería simple. Cuando carga la clase .content es visible. Cuando vuelve a cargar, los elementos entran uno en el otro.

Esto solo ocurre en Chrome y Safari, en Firefox se ve bien.

Aquí es el css de la red:

#media_list {} 
#media_list .media_item { height: auto; width: 270px; display: inline-block; background: #f4f4f4; border: 1px solid #d9d7d5; float: left; padding: 10px 0px 10px 0px; font: 11px Helvetica Neue; } 
#media_list .media_item .date { color: white; background: #2f343a; padding: 10px 5px; width: 260px; float: left; margin: 0px 0px 15px 0px;} 
#media_list .media_item .content { padding: 15px; float: left; display: inline-block; margin-bottom: 20px; } 
#media_list .media_item img { border: 1px solid #dedddd; margin: 0px 0px 10px 10px; width: 248px;} 

Esta es la forma en la mampostería se llama:

$('#media_list').masonry({ // options 
          itemSelector : '.media_item', 
          columnWidth : 300 
         }); 

puedo trabajar alrededor de ella con min-height s y margin s, pero eso no es dinámico y doesn No se ven muy limpios.

Aquí está a JS Fiddle pero realmente no reproduce el problema.

Answer 1

Parece que ya usa la recarga. Tal vez sea porque las imágenes se vuelven a cargar en la actualización de URL y no en la recarga.

Probar:

var $container = $('#media_list'); 
$container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector : '.media_item', 
     columnWidth : 300, 
     gutterWidth: 20 
    }); 
}); 

lo contrario

$('#media_list').masonry({ 
    // options 
    itemSelector : '.media_item', 
    columnWidth : 300, 
    gutterWidth: 20 
}).masonry('reload'); 

Answer 2

Para una mejor compatibilidad con Google Chrome, por ejemplo, cambiar

var $container = $('#media_list'); 

a

$(window).load(function(){ $('#media_list').masonry(); });