Vấn đề chiều cao Jquery Masonry

Question

Tôi có lưới xây đơn giản. Khi nó tải lớp .content hiển thị. Khi bạn tải lại các mục sẽ chuyển vào nhau.

Điều này chỉ xảy ra trong Chrome và Safari, trong Firefox có vẻ tốt.

Đây là css từ lưới:

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

Đây là cách nề được gọi là:

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

tôi có thể làm việc xung quanh nó với min-height s và margin s nhưng đó không phải năng động và doesn trông rất sạch sẽ.

Đây là a JS Fiddle nhưng không thực sự tái tạo sự cố.

Answer 1

Dường như bạn đã sử dụng tải lại. Có thể vì hình ảnh tải lại khi làm mới URL và không tải lại.

Hãy thử:

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

khác

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

Answer 2

Đối với một khả năng tương thích tốt hơn với Google Chrome ví dụ, thay đổi

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

để

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