如何让 JQuery Masonry 识别添加的项目？答案

【问题标题】：How do I get JQuery Masonry to recognize added items?如何让 JQuery Masonry 识别添加的项目？
【发布时间】：2011-10-21 18:36:59
【问题描述】：

这是same question as this one，但我在JSFiddle 上对here 上的问题进行了重现。所以我想我会重新发布。

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

【问题讨论】：

标签： jquery jquery-masonry

【解决方案1】：

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

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

我更新了你的小提琴here。

【讨论】：

谢谢！不知道为什么我需要告诉 Masonry 已经附加了内容。它可以通过在调用时重新加载砖块来从 DOM 中获取。
好吧，我猜当你有大量积木时，只处理新元素会更好地扩展。
也许吧。取决于多少砖。我有 150 多块砖块正在动态堆叠，没有明显的滞后。
Masonry 缓存项目选择，因此它不必为触发的每个重新布局都这样做。这种情况经常发生，因为人们可能正在调整窗口大小。您下面的解决方案将起作用，一遍又一遍地选择项目。我认为这是一个边缘案例，而大多数人并没有动态添加内容。如果是这样，那么有像 appended 这样的方法会为他们处理它。

【解决方案2】：

我似乎已经解决了这个问题，方法是在第 305 行的 JQuery Masonry 代码中添加一行以将“砖块”重新加载到 _reLayout 函数。

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

有人发现这有什么问题吗？

【讨论】：

感谢 Rich，您的 reloadItems() 编辑解决了我疯狂的 Firefox 问题。我的砌体内容通过 ajax 不断快速地更新附加砖块，以及移除砖块。仅在 Firefox 中，我在大约 3 次内容更新后得到了一些糟糕的定位，其中第一行/顶行的顶部位置关闭，并且即使在调整大小或重新调用 .masonry() 函数时也会保持不正确的位置。在跟踪传递给 _placeBrick 函数的值时，我注意到我得到了 -Infinity 的“setY”值。同样我不知道为什么，但这消除了 -Infinity va
酷！很高兴它帮助了别人。也许我可以在发布的代码中看到它作为一个选项。

【解决方案3】：

我使用了reload 方法：

.masonry( 'reload' )

这是masonry doc for reload：

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

【讨论】：

【解决方案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);

再也不用担心了！

【讨论】：