javascript - simple - Iniciar mampostería: después del desplazamiento infinito y la búsqueda paramétrica

simple pagination.js example

Question

Tener un problema con la cuadrícula AJAX y Masonry . La grilla de mampostería es simple, no se inicia en los momentos correctos.

Antes de desplazarse o usar la búsqueda paramétrica para ir a una categoría específica, funciona muy bien.

Sitio de muestra se puede encontrar aquí .

Albañilería

Masonry es una biblioteca de diseño de cuadrícula de JavaScript. Usado normalmente con Bootstrap u otro sistema de cuadrícula que no alinea los elementos correctamente. Ejemplo:

Solo arranque:

Bootstrap y Masonry:

Cuando se desplaza

Las siguientes columnas se agregan por encima de las anteriores. Da casi el mismo resultado que las imágenes descargadas, lo que hace que las imágenes se superpongan. Esto normalmente se resuelve utilizando imagesLoaded que ya he incluido en el código provisto.

Al usar la búsqueda paramétrica

La Masonería no está siendo despedida después del AJAX. Lo que significa que no funciona en absoluto. Entonces, las columnas se están cargando sin mampostería.

Por favor mira el sitio de muestra .

Tanto la búsqueda de desplazamiento como la paramétrica son entregadas por Toolset . Tienen un buen sistema con lo que es muy fácil cargar JS en momentos específicos:

• Después de que se haya completado la paginación AJAX con Toolset .
• Cuando se ha activado la búsqueda paramétrica.
• Cuando se han recopilado los datos de búsqueda paramétrica.
• Cuando se ha actualizado el formulario de búsqueda paramétrica.
• Cuando los resultados de búsqueda paramétrica se han actualizado.

Entonces, ambos después de la paginación y antes / durante / después de la búsqueda paramétrica . Como el problema está después del desplazamiento, y después de actualizar los resultados de la búsqueda paramétrica, me gustaría iniciar la grilla de mampostería en este mismo momento.

El ejemplo más fácil es cuando se realiza el desplazamiento, o paginación como también se llama.

Lo que he intentado

reloadItems como suponía que sería correcto. Por favor, corríjame si estoy equivocado. Recurso .

jQuery( document ).on( ''js_event_wpv_pagination_completed'', function( event, data ) {
$container.masonry(''reloadItems'')
});

En mi teoría, volvería a cargar todos los elementos cuando se desplazara, por lo que se organizarían correctamente. Pero no cambia nada.

También he intentado lo siguiente:

jQuery( document ).on( ''js_event_wpv_pagination_completed'', function( event, data ) {
var $container = $(''.masonry-container'');
$container.imagesLoaded(function() {
$container.masonry(''reload'');
$container.masonry({
isInitLayout : true,
itemSelector: ''.col-md-3''
});
});
//and on ajax call append or prepend
$container.prepend($data).imagesLoaded(function(){
$container.masonry( ''prepended'', $data, true );
});
});

También traté de volver a cargar los elementos cuando se actualizaron los resultados de la búsqueda paramétrica.

jQuery( document ).on( ''js_event_wpv_parametric_search_results_updated'', function( event, data ) {
$container.masonry(''reloadItems'')
});

Pero esto tampoco funcionó.

La masonería también se agrega en el pie de página utilizando uno de los métodos.

(function( $ ) {
"use strict";
var $container = $(''.masonry-container'');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: ''.col-md-3'',
percentPosition: true,
itemSelector: ''.col-md-3''
});
});
})(jQuery);

¿Tienes alguna idea? ¿Dónde estoy haciendo mal?

Editar 1:

Error de consola

Al cargar la página

UnEdge ReferenceError: los datos no están definidos

Cuando se desplaza

Unloading ReferenceError: $ container no está definido

Cambió la función a la siguiente

 (function( $ ) {
// Initiate Masonry
"use strict";
var $container = $(''.masonry-container'');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: ''.item'',
percentPosition: true,
itemSelector: ''.item'',
isAnimated: true // the animated makes the process smooth
});
});
$(window).resize(function() {
$(''.masonry-container'').masonry({
itemSelector: ''.item'',
isAnimated: true
}, ''reload'');
});
})(jQuery);
//and on ajax call append or prepend more items
var $data = $(data).filter(".item");
$container.prepend($data).imagesLoaded(function(){
$container.masonry( ''prepended'', $data, true );
}); 

Imágenes actualizadas cargadas a la última versión

También actualicé imágenes cargadas a la última versión.

El script se puede encontrar aquí .

Añadido .item

.item el elemento de clase en lugar de usar col-md-3, ya que pensé que sería una mejor solución.

Lo que significa que el HTML es el siguiente en este momento:

<div class="container">
<div class="masonry-container">
<div class="item">
<!-- Content comes here -->
</div>
<div class="item">
<!-- Content comes here -->
</div>
<div class="item">
<!-- Content comes here -->
</div>
<div class="item">
<!-- Content comes here -->
</div>
...
</div>
</div>

Y así.

Aún errores de consola.

Alguna solución?

Answer 1

El problema se resolvió eliminando parte de la duplicación, etc.

Luego usando lo siguiente:

(function( $ ) {
"use strict";
var $container = $(''.masonry-container'');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: ''.item'',
percentPosition: true,
itemSelector: ''.item''
});
});
$( document ).on( ''js_event_wpv_pagination_completed'', function( event, data ) {
$container.masonry(''reloadItems'').masonry();
});
$( document ).on( ''js_event_wpv_parametric_search_results_updated'', function( event, data ) {
$container.masonry(''reloadItems'').masonry();
});
$( document ).on( ''js_event_wpv_pagination_completed'', function( event, data ) {
$container.masonry(''reloadItems'').masonry();
$container.imagesLoaded( function() {
$container.masonry();
});
});
$( document ).on( ''js_event_wpv_parametric_search_results_updated'', function( event, data ) {
$container.masonry(''reloadItems'').masonry();
$container.imagesLoaded( function() {
$container.masonry();
});
});
})(jQuery);

Esto fue agregado en footer.php.