Animating item size in Isotope: Why is first item wonky?

Question

I'm learning to use Isotope and came across the author's blog post about how to animate item sizes.

I have implemented that for a project I am developing. It consists of three vertical columns. Each item is 196px x 70px. When you click an item, it will expand to 402px x 230px.

All the items resize properly and cause Isotope to refresh the layout -- except the first item.

Clicking the first item causes all the subsequent list items to line up in just one vertical column -- even though there is plenty of room and the items should flow around the first one.

Clicking any other item in the list results in the correct behavior. Only the first one is wonky. Can anyone see what might cause this?

Here's my test case: http://joshrenaud.com/pd/testcase/testcase.html

The code that handles this resizing looks like this:

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

I found the answer after a little more experimenting. Isotope has an attribute called columnWidth, which the docs make out to be optional since the script can determine the column width from the first item.

However adding the columnWidth to my .isotope() initializer made this thing work right.

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

Also, it seems that columnWidth is not the same as the width of the item. It's the width of the item, plus the gutter (margin). In my case, the columnWidth was 206: 196 (item width) + 10 (gutter/margin).