Question

这是same question as this one，但我对JSFiddle up here的问题有一个重复。所以我以为我会转发。

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

Answer 1

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

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

我更新了你的小提琴here。

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

有人发现此问题吗？

Answer 3

我使用了reload方法：

.masonry( 'reload' )

这是masonry doc for reload：

“触发reloadItems的便捷方法，然后是.masonry（）。用于预先添加或插入项目。”

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

再也不用担心了！

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

4 个答案: