如何讓JQuery Masonry識別添加的項目？

這是same question as this one，但我有問題的攝製上的jsfiddle了here。所以我想我會重新發布。如何讓JQuery Masonry識別添加的項目？

JQuery的砌體似乎只評估其容器的孩子一次，第一次運行。之後，不可能讓它再次查看DOM以重新評估其子項。

2011-10-21 Rich Armstrong

你必須通過新的內容，以砌體的appended方法：

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

我更新了小提琴here。

來源

2011-10-21 19:07:52

謝謝！不知道爲什麼我需要告訴砌體有附加內容。它可以通過在調用時重新加載磚來從DOM獲得。 –

嗯，我想只有當你有大量磚塊時，只處理新元素的尺度會更好。 –

也許吧。取決於多少塊磚塊。我有超過150塊磚被動態堆放，沒有明顯的滯後。 –

我似乎添加一行重新加載「磚頭」到_reLayout功能JQuery的砌體代碼在行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); 
},

任何人看到任何與此問題已經解決了嗎？

來源

2011-10-21 19:34:39

感謝Rich，您的reloadItems（）編輯解決了我瘋狂的Firefox問題。我的砌體內容通過ajax不斷更新，並通過附加的磚塊進行更新，以及拆除磚塊。在只有Firefox中，我得到了一些不好的定位後約3的內容更新，其中，第一/頂部行的頂部位置被關閉，並調整或重新調用.masonry（）函數時，會留下不正確甚至定位。當跟蹤正在傳遞的_placeBrick函數的值時，我注意到我得到了-Infinity的「setY」值。再次我不知道爲什麼，但是這消除了-Infinity va –

酷！很高興幫助別人。也許我可以看到將它作爲發佈代碼中的一個選項。 –

我利用了reload方法：

.masonry('reload')

這裏的masonry doc for reload：

「的便捷方法，用於觸發reloadItems然後.masonry（）有用的前面加上或插入項。「

來源

2012-07-04 00:43:54

鏈接已死亡。 :( – Manwal

如果你正在使用jQuery，這將解決所有的問題。

要包括砌體在你的HTML/PHP頁面像這樣的東西：

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

相反，離開這樣的：

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

並用以下創建js/masonry-init.js文件：

$('#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);

再也不用擔心了！

來源

2014-04-15 13:13:55

如何讓JQuery Masonry識別添加的項目？

回答

相關問題