Làm cách nào để tải JQuery Masonry để nhận ra các mục đã thêm?

Question

Đây là same question as this one, nhưng tôi có vấn đề về vấn đề này trên JSFiddle lên here. Vì vậy, tôi nghĩ rằng tôi muốn repost.

JQuery Masonry dường như chỉ đánh giá con của vùng chứa của nó một lần, vào lần chạy đầu tiên. Sau đó, không thể làm cho nó nhìn vào DOM một lần nữa để có được nó để đánh giá lại con cái của nó.

Answer 1

Bạn phải vượt qua các nội dung mới vào phương pháp appended Masonry của:

$("#container").append(content).masonry("appended", content); 

tôi cập nhật fiddle bạn here.

Answer 2

tôi dường như đã giải quyết điều này bằng cách thêm một dòng để tải lại "gạch" vào _reLayout hàm trong mã JQuery Masonry tại dòng 305.

_reLayout : function(callback) { 

    // This is my added line. 
    // Items might have been added to the DOM since we laid out last. 
    this.reloadItems(); 

    // reset columns 
    var i = this.cols; 
    this.colYs = []; 
    while (i--) { 
    this.colYs.push(this.offset.y); 
    } 
    // apply layout logic to all bricks 
    this.layout(this.$bricks, callback); 
}, 

// ====================== Convenience methods ====================== 

// goes through all children again and gets bricks in proper order 
reloadItems : function() { 
    this.$bricks = this._getBricks(this.element.children()); 
}, 


reload : function(callback) { 
    this.reloadItems(); 
    this._init(callback); 
}, 

Bất cứ ai nhìn thấy bất kỳ vấn đề với điều này?

Answer 3

tôi đã sử dụng phương pháp reload:

.masonry('reload')

Đây là masonry doc for reload:

"phương pháp thuận tiện để kích hoạt reloadItems sau đó .masonry() hữu ích cho thêm vào trước hoặc chèn mục.. "

Answer 4

nếu bạn đang sử dụng jQuery, điều này sẽ giải quyết mọi vấn đề của bạn.

Bạn đã bao gồm Masonry trong trang/php html của bạn với một cái gì đó như thế này:

<script src="js/masonry.min.js"></script> 
<script> 
    $('#ms-container').masonry({ 
     columnWidth: '.ms-item', 
     itemSelector: '.ms-item' 
    }); 
</script> 

Thay vào đó, hãy để nó như thế này:

<script src="js/masonry.min.js"></script> 
<script src="js/masonry-init.js"></script> 

Và tạo ra các tập tin js/masonry-init.js như sau:

$('#ms-container').masonry({ 
    columnWidth: '.ms-item', 
    itemSelector: '.ms-item' 
}); 
var masonryUpdate = function() { 
    setTimeout(function() { 
     $('#ms-container').masonry(); 
    }, 500); 
} 
$(document).on('click', masonryUpdate); 
$(document).ajaxComplete(masonryUpdate); 

Không bao giờ phải lo lắng về điều đó nữa!