Isotope - fitColumns in fit container
Re http://stackoverflow.com/questions/5100009/relayout-items-with-isotope-doesnt-seem-to-maintain-structure
HTML
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
<div class="item" id="min2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et quam eu nunc blandit euismod at non sem. Nunc quis lorem lacus, et fringilla lacus.</div>
</div>
CSS
body{padding:20px;margin:0;font-family:Arial,Helvetica,sans-serif;font-size:11px;color:#000;}
.item{cursor:pointer;padding:5px;background:#ccc;width:195px;margin:10px;}
.item img{cursor:pointer;width:100%;}.item.selected{width:635px;height: auto;}
#min{width:195px;}
#min2{max-width:415px;background:yellow;}
JavaScript
$(function(){
var $container=$('#container'),
$items=$('.item')
$container.imagesLoaded(function(){
$container.isotope({
itemSelector:'.item',
masonry: {columnWidth: 10},
sortBy:'order'
})
});
$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()
})
});