How to get jQuery Masonry to recognize added elements?

Question

This is the same question as this one , but I have a reprography about JSFiddle up. So I thought that I would retire.

JQuery Masonry seems to only evaluate the children of its container once, upon first launch. After that, it is impossible to get him to look again at the DOM to make him reevaluate his children.

Answer 1

You must pass the new content to the freemasonry appended method:

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

I updated your fiddle here .

Answer 2

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

- ?

Answer 3

reload:

.masonry( 'reload' )

:

" reloadItems then.masonry(). ."

Answer 4

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

!