Jquery Altezza muratura

Question

Ho una semplice griglia in muratura. Quando carica la classe .content è visibile. Quando si aggiorna , gli elementi si spostano l'uno verso l'altro.

Questo accade solo in Chrome e Safari, in Firefox sembra buono.

Ecco il css dalla rete:

#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;} 

Questo è il modo in muratura si chiama:

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

posso lavorare intorno ad esso con min-height s e margin s, ma questo non è dinamica e doesn sembra molto pulito

Questo è a JS Fiddle ma non replica realmente il problema.

Answer 1

Sembra che tu usi già la ricarica. Forse perché le immagini si ricaricano sull'aggiornamento dell'URL e non sulla ricarica.

Prova:

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

altrimenti

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

Answer 2

Per una migliore compatibilità con Google Chrome per esempio, modificare

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

a

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