has - jquery name attribute

Artículos superpuestos de albañilería JS

Question

Tengo un problema muy extraño aquí: [Enlace de referencia eliminado] . Los elementos de la primera fila de productos se superponen con los elementos de la segunda fila.

Los elementos de mampostería están debajo de la página de inicio sobre el pie de página. Como puedes ver, se ve diferente con Chrome. En Firefox, se ve bien.

Así es como se ve en mi chrome: http://clip2net.com/s/5LIRko

Mi código de jQuery es:

jQuery(function($){
var $container = $(''.woocommerce ul.products'');
    $container.masonry({
          columnWidth:10, 
          gutterWidth: 15,
          itemSelector: ''.product-category''
    });
});

¿Hay alguna regla css que afecte la salida de la fila?

Answer 1

Cargando mampostería después de la ventana de carga funciona para mí.

jQuery(window).on(''load'', function(){
    //masonry init and options
    // .. codes
}

Gracias.

Answer 2

Debe iniciar la Masonería después de que se carguen todas las imágenes. Si está utilizando jQuery intente:

var $container = $(''#container'');
// initialize Masonry after all images have loaded  
$container.imagesLoaded( function() {
  $container.masonry();
});

para otras opciones vea documentos de albañilería - http://masonry.desandro.com/layout.html#imagesloaded

Answer 3

El problema es tus imágenes. Cuando se llama a la mampostería, sus imágenes no se han cargado. Asumiendo la altura de sus elementos SIN la altura de la imagen que se tiene en cuenta.

Si actualiza la pantalla después de que las imágenes ya están en caché, verá que se carga correctamente. Si luego borra la memoria caché y la actualiza, verá que se superponen de nuevo.

Cuatro cinco opciones:

• Espere hasta que las imágenes terminen de cargarse (hay complementos que puede esperar hasta que se carguen todas las imágenes dentro de un div determinado, por ejemplo)
• Espere el evento de carga en lugar del evento listo. En lugar de usar jQuery(function($){ use jQuery(window).on(''load'', function(){ var $ = jQuery; y verá los resultados.
• Vuelva a aplicar la mampostería después de que se carguen las imágenes (no me gusta esta ... vería un parpadeo)
• Mi favorito, no use mampostería aquí! Desactiva JS en tu página y mira el diseño. Es lo que quieres. Todos los divs son incluso alturas e incluso anchuras. No hay realmente una razón para usar la mampostería aquí. Simplemente haga flotar sus elementos y permita que se vean en la cuadrícula de forma natural.
• EDITAR: otra opción. Especifique una altura de los divs para que la altura no dependa de las imágenes que está cargando.

Answer 4

Gracias, su solución funciona después de reemplazar document.ready con jQuery (window) .on (''load'', function () {

Answer 5

He resuelto este problema con una función settimeout. Al permitir que pase un segundo (según el número y el tamaño del archivo de las imágenes que se están descargando), puede descargar las imágenes primero y luego aplicar la mampostería.

                $(document).ready(function(){                                                                                                                   
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });     
            $(window).resize(function() 
            {
                // jQuery
                $(''.grid'').masonry( ''destroy'')
                $(''.grid2'').masonry( ''destroy'')                 
                setTimeout(function() { masonry_go();masonry_go2();}, 1000);                                                                    
            });                 
            function masonry_go(){
                $(''.grid'').masonry({
                  // options
                  itemSelector: ''.grid-item'',
                  columnWidth: 300
                });                         
            }       
            function masonry_go2(){
                $(''.grid2'').masonry({
                  // options
                  itemSelector: ''.grid-item2'',
                  gutter: 15,
                  columnWidth: 200
                });                         
            }       

Answer 6

Utilice la biblioteca ImagesLoaded, se hace especialmente para reorganizar los bloques cuando se carga cada imagen.

Puedes descargarlo desde:

https://github.com/desandro/imagesloaded