Espaces dans la disposition isotopique - javascript, jquery, css, jquery-isotope

Nous ne pouvons pas comprendre pourquoi il y a de grands espaces supplémentaires dans la disposition de la section Travail. Quelqu'un peut-il aider?

http://new-had.herrmanneasyeditdemo.com/#work

Réponses:

Pour résoudre le problème de chargement avec l'affichage de votre divavant vos images, vous devez charger vos images en utilisant imagesLoaded. Cela empêche juste les div de s'afficher avant que l'isotope soit appelé. Puisque vous utilisez l'isotope v1.56, pas la v2, il est inclus dans cette version d'isotope. Modifiez votre appel d'isotope custom.js (à la ligne 107) à ceci:

var $container = $("#portfolio-container");
$container.imagesLoaded( function(){
$container.isotope({
resizable: false,
itemSelector : ".item",
masonry : {
columnWidth : 1,
gutterWidth: 1,
}

});
});

Résoudre votre problème de mise en page est plus compliquécar je ne suis pas sûr que vous puissiez adapter toutes vos images dans une grille transparente en utilisant isotope v1.56 et la maçonnerie (le plus souvent, vous devez les réorganiser pour que les tailles s’adaptent sans espace blanc). Vous devrez mettre à jour vers isotope v2 et charger le option de mise en page de l'emballage après isotope, puis définissez votre code comme tel, pour qu'ils s'emboîtent.

var $container = $("#portfolio-container");
$container.imagesLoaded( function(){
$container.isotope({
layoutMode: "packery",
itemSelector: ".item"

});
});

Vous devrez également modifier la ligne 349:

 $(window).resize(function(){
$("#portfolio-container").isotope("layout");
});