web-dev-qa-db-fra.com

Éléments superposés en maçonnerie JS

J'ai un problème très étrange ici: [lien de renvoi supprimé]. Les produits de la première ligne se chevauchaient avec les articles de la deuxième ligne. 

Les éléments de maçonnerie sont situés sous la page d'accueil, au-dessus du pied de page. Comme vous pouvez le constater, le rendu est différent avec Chrome. Dans Firefox, ça a l'air bien.

Voici à quoi ça ressemble dans mon chrome: http://clip2net.com/s/5LIRko

Mon code jQuery est:

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

Existe-t-il une règle CSS qui affecte la sortie de la ligne?

jquerycssjquery-masonry
21
Jed

Le problème est vos images. Au moment où la maçonnerie est appelée, vos images ne sont pas chargées. Donc, on assume la hauteur de vos éléments SANS la hauteur de l’image prise en compte.

Si vous actualisez votre écran après la mise en cache des images, vous verrez qu'il se charge correctement. Si vous effacez ensuite le cache et actualisez, vous verrez qu'ils se chevauchent à nouveau.

Quatre Cinq options:

  • Attendez que le chargement des images soit terminé (par exemple, il est possible d'attendre le téléchargement de toutes les images d'une div donnée)
  • Attendez que l'événement de chargement à la place de l'événement prêt. Au lieu d'utiliser jQuery(function($){, utilisez jQuery(window).on('load', function(){ var $ = jQuery; et vous verrez les résultats.
  • Réappliquez la maçonnerie après le chargement des images (vous n'aimez pas celle-ci ... vous verriez un scintillement)
  • Mon préféré, n'utilisez pas de maçonnerie ici! Désactivez JS sur votre page et regardez la mise en page. C'est ce que tu veux. Tous les divs sont même des hauteurs et des largeurs. Il n'y a pas vraiment de raison d'utiliser la maçonnerie ici. Faites simplement flotter vos éléments et laissez-les apparaître naturellement dans la grille.
  • EDIT: une autre option. Spécifiez une hauteur des divs pour que la hauteur ne dépende pas des images qu'elle charge.
53
Eli Gassert

Vous devez lancer la maçonnerie une fois toutes les images chargées .. Si vous utilisez jQuery, essayez:

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

pour d'autres options, voir la documentation Maçonnerie - http://masonry.desandro.com/layout.html#imagesloaded

12
Zbigniew Ledwoń

Merci, votre solution fonctionne après le remplacement de document.ready par jQuery (window) .on ('load', function () {

5
ziaprog

J'ai résolu ce problème avec une fonction d'imputation. En laissant passer environ une seconde (en fonction du # et de la taille du fichier des images téléchargées), vous pouvez télécharger les images d’abord, puis appliquer de la maçonnerie. 

                $(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
                });                         
            }
2
Jeff Shain

Utilisez la bibliothèque ImagesLoaded, est spécialement conçu pour réorganiser les blocs lorsque chaque image est chargée.

Vous pouvez le télécharger à partir de:

https://github.com/desandro/imagesloaded

1
carlosacns

Le chargement de maçonnerie après le chargement de fenêtre fonctionne pour moi.

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

Merci.

0
sybozz