Jquery Duvarcılık yüksekliği sorunu

Question

Basit bir duvar ızgaram var. Yüklendiğinde, .content sınıfı görünür. 'u yeniden yüklediğinizde, öğeler birbirine akar.

Bu yalnızca Chrome ve Safari'de gerçekleşir, Firefox'ta iyi görünüyor.

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

Bu duvarcılık denir nasıl: Burada

şebekesinden css

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

Ben min-height s ve margin s ile etrafında çalışabilirsiniz ama bu dinamik değil ve gelmez çok temiz görünmüyor.

İşte a JS Fiddle ancak gerçekten bu sorunu çoğaltmıyor.

Answer 1

Zaten yeniden yüklemeyi kullandığınız görünüyor. Belki de görüntüleri URL yenilemede yeniden yükler ve yeniden yüklemez.

deneyin: Örneğin Google Chrome ile daha iyi bir uyumluluk için

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

aksi

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

Answer 2

, değiştirmek

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

için

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

(