¿Cómo consigo que JQuery Masonry reconozca elementos añadidos?

Question

Este es el same question as this one, pero tengo una reproducción del problema en JSFiddle up here. Así que pensé que volvería a publicar.

JQuery Masonry parece que solo evalúa los elementos secundarios de su contenedor una vez, en la primera ejecución. Después de eso, es imposible hacer que vuelva a mirar el DOM para que vuelva a evaluar a sus hijos.

Answer 1

usted tiene que pasar el nuevo contenido con el método de la Masonería appended:

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

He actualizado su violín here.

Answer 2

Me parece haber resuelto esto añadiendo una línea para recargar los "ladrillos" para la función _reLayout en el código jQuery albañilería en la línea 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); 
}, 

Cualquier persona ve ningún problema con esto?

Answer 3

I hizo uso del método de reload:

.masonry('reload')

Aquí está la masonry doc for reload:

"Método de conveniencia para la activación de reloadItems entonces .masonry() Útil para anteponiendo o la inserción de artículos.. "

Answer 4

si está utilizando jQuery, esto resolverá todos sus problemas.

está incluyendo albañilería en su página HTML/PHP con algo como esto:

<script src="js/masonry.min.js"></script> 
<script> 
    $('#ms-container').masonry({ 
     columnWidth: '.ms-item', 
     itemSelector: '.ms-item' 
    }); 
</script> 

En su lugar, dejarlo así:

<script src="js/masonry.min.js"></script> 
<script src="js/masonry-init.js"></script> 

y crear el archivo js/masonry-init.js con lo siguiente:

$('#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); 

¡Nunca más vuelvas a preocuparte por eso!