Animation de la taille d'un élément dans l'isotope: Pourquoi le premier élément est-il en colère? - javascript, jquery, jquery-maçonnerie

Je suis en train d'apprendre à utiliser Isotope et est tombé sur le blog de l'auteur sur la façon de animer la taille des éléments.

Je l'ai implémenté pour un projet que je développe. Il se compose de trois colonnes verticales. Chaque élément mesure 196 px x 70 px. Lorsque vous cliquez sur un élément, il s'élargit à 402 px x 230 px.

Tous les éléments sont redimensionnés correctement et Isotope actualise la mise en page - sauf le premier élément.

En cliquant sur le premier élément, tous les éléments de la liste suivants s'alignent dans une seule colonne verticale - même s'il y a beaucoup d'espace et que les éléments doivent circuler autour du premier.

En cliquant sur tout autre élément de la liste, le comportement est correct. Seul le premier est bancal. Quelqu'un peut-il voir ce qui pourrait provoquer cela?

Voici mon cas de test: http://joshrenaud.com/pd/testcase/testcase.html

Le code qui gère ce redimensionnement ressemble à ceci:

    $(".child").click(function(){
var $this = $(this);
if ($this.hasClass("big")) {
tileStyle = { width: 196, height: 70};
}
else {
tileStyle = { width: 402, height: 230};
}
$this.children().children(".childDate").toggle();
$this.children().children(".childDesc").toggle();
$this.toggleClass("big");

$this.find(".child-content").stop().animate( tileStyle );

$("#container").isotope( "reLayout" )

});

Réponses:

J'ai trouvé la réponse après un peu plusexpérimenter. Isotope a un attribut appelé columnWidth, qui, selon les documents, est facultatif, car le script peut déterminer la largeur de la colonne à partir du premier élément.

Cependant, l'ajout de columnWidth à mon initialiseur .isotope () a fait fonctionner cette chose correctement.

$("#container").isotope({
masonry: { columnWidth : 206 }
});

De plus, il semble que columnWidth soit ne pas la même que la largeur de l'article. C'est la largeur de l'élément, plus la gouttière (marge). Dans mon cas, la largeur de la colonne était de 206: 196 (largeur de l'élément) + 10 (gouttière / marge).