Isotope - fitColumns in fit container

Re http://stackoverflow.com/questions/5100009/relayout-items-with-isotope-doesnt-seem-to-maintain-structure

by refhat

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
     <div class="item corner" id="min"><ul id="filters" style="padding:0;margin:0;">
  <li><a href="#" data-filter="*">all</a></li>
  <li><a href="#" data-filter=".one, .corner">abstract</a></li>
  <li><a href="#" data-filter=".two, .corner">shoes</a></li>
</ul></div>
        <div class="item one"><img src="http://www.wiels.org/dbfiles/mfile/1700/1797/image.jpg"><p><img src="http://www.wiels.org/dbfiles/mfile/1700/1797/image.jpg"><p>image description</div>
    <div class="item one"><img src="http://lesirreguliers.unblog.fr/files/2007/12/image.jpg"><p>image description</div>
  <div class="item one"><img src="http://lesirreguliers.unblog.fr/files/2007/12/image.jpg"><p>image description</div>
  <div class="item two"><img src="http://www.hasbeeners.com/Blog/wp-content/uploads/2011/11/Image-9-635x423.png"><p>image description</div>
  <div class="item two"><img src="http://www.hasbeeners.com/Blog/wp-content/uploads/2011/11/Image-9-635x423.png"><p>image description</div>
  <div class="item two"><img src="http://www.hasbeeners.com/Blog/wp-content/uploads/2011/11/Image-9-635x423.png"><p>image description</div>
  <div class="item two"><img src="http://www.hasbeeners.com/Blog/wp-content/uploads/2011/11/Image-9-635x423.png"><p>image description</div>
  <div class="item two"><img src="http://www.hasbeeners.com/Blog/wp-content/uploads/2011/11/Image-9-635x423.png"><p>image description</div>
</div>

CSS

body{font-family:Arial,Helvetica,sans-serif;}
.item{padding-bottom:10px;border-bottom:1px dashed #111;width:195px;margin:10px}
.item img{cursor:pointer;width:100%}
.selected{width:auto;height:auto}

#min{width:195px}
#min2{max-width:415px}

#wait{padding:10px}

#filters a{color:blue}
#filters a:focus{color:red}

@media screen and (max-width:655px)
{body{padding:10px;font-size:12px}.item.selected{width:415px}}
@media screen and (max-width:467px){.item{width:auto;padding:auto}#min{width:90%;height:auto}.item.selected{width:auto}}



.item:hover {
  cursor: pointer;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;

}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
    var $container=$('#container'),
        $items=$('.item')
        $filterLinks = $('#filters a');
        
    $container.imagesLoaded(function(){
        $container.isotope({
            itemSelector:'.item',
            masonry: {columnWidth: 10},
            sortBy:'order',
            filter: '*'
        })
    });

$filterLinks.click(function(){
    var $this = $(this);
    
    // get selector from data-filter attribute
    selector = $this.data('filter');
    
    $container.isotope({
      filter: selector
    });
});    

 
    $items.click(function(){
        var $this=$(this);
        var $previousSelected=$('.selected');
        if(!$this.hasClass('selected')){$this.addClass('selected')}
        
        $previousSelected.removeClass('selected');
        
        $container
            .isotope('updateSortData',$this)
            .isotope('updateSortData',$previousSelected)
            .isotope()
    })
});