Как заставить JQuery Masonry распознавать добавленные элементы?

Question

Это тот же самый вопрос , что и этот , но у меня есть сообщение о проблеме с JSFiddle до здесь .Так что я решил сделать репост.

JQuery Masonry, кажется, оценивает дочерние элементы его контейнера только один раз, при первом запуске.После этого невозможно заставить его снова взглянуть на DOM, чтобы заставить его пересмотреть своих детей.

Answer 1

Вы должны передать новый контент методу , добавленному от Masonry:

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

Я обновил вашу скрипку здесь .

Answer 2

Я использовал метод reload:

.masonry( 'reload' )

Вот документация кладка для перезагрузки :

«Удобный метод для запуска reloadItems затем .masonry (). Полезно для добавления или добавления элементов.»

Answer 3

Кажется, я решил эту проблему, добавив строку для перезагрузки «кирпичиков» в функцию _reLayout в коде JQuery Masonry в строке 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 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);

Никогда не беспокойся об этом снова!