jquery - 如何让 JQuery Masonry 识别添加的项目？

Question

这与这个问题相同，但我对 JSFiddle 上的问题进行了复现。所以我想我会重新发布。

JQuery Masonry 似乎只在第一次运行时评估其容器的孩子一次。在那之后，不可能让它再次查看 DOM 以重新评估它的子节点。

Answer 1

您必须将新内容传递给 Masonry 的附加方法：

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

我在这里更新了你的小提琴。

Answer 2

我使用了以下reload方法：

.masonry( 'reload' )

这是reload 的砌体文档：

“触发 reloadItems 然后 .masonry() 的便捷方法。用于添加或插入项目。”

Answer 3

我似乎通过_reLayout在第 305 行的 JQuery Masonry 代码中添加一行将“砖块”重新加载到函数中来解决了这个问题。

_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 );
},

有人看到这有什么问题吗？

Answer 4

如果您使用 jQuery，这将解决您的所有问题。

您在 html/php 页面中包含 Masonry，如下所示：

<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);

再也不用担心了！