Animar el tamaño del artículo en Isótopo: ¿Por qué es el primer artículo wonky?

Question

Estoy aprendiendo a usar Isotope y me encontré con la publicación del blog del autor sobre cómo animate item sizes.

Lo he implementado para un proyecto que estoy desarrollando. Consiste en tres columnas verticales. Cada artículo es 196px x 70px. Al hacer clic en un elemento, se ampliará a 402px x 230px.

Todos los elementos cambian de tamaño correctamente y hacen que Isotope actualice el diseño, excepto el primer elemento.

Hacer clic en el primer elemento hace que todos los elementos de la lista subsiguientes se alineen en una sola columna vertical, aunque hay mucho espacio y los elementos deben fluir alrededor del primero.

Al hacer clic en cualquier otro elemento de la lista se produce el comportamiento correcto. Solo el primero es wonky. ¿Alguien puede ver lo que podría causar esto?

Aquí es mi caso de prueba: http://joshrenaud.com/pd/testcase/testcase.html

El código que se encarga de este cambio de tamaño se parece a esto:

$('.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') 

    }); 

Answer 1

he encontrado la respuesta después de un poco más de la experimentación. Isotopo tiene un atributo llamado columnWidth, que los documentos establecen como opcional ya que el script puede determinar el ancho de la columna desde el primer elemento.

Sin embargo, agregar el columnWidth a mi inicializador .isotope() hizo que esto funcionara bien.

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

Además, parece que es columnWidth no el mismo que el ancho del elemento. Es el ancho del artículo, más el margen (margen). En mi caso, el ancho de columna fue 206: 196 (ancho del elemento) + 10 (margen/margen).