$(function(){ var $container = $('#container'), $items = $('.item'); $container.isotope({ itemSelector: '.item', layoutMode : 'fitColumns', resizesContainer : false, getSortData : { fitOrder : function( $item ) { var order, index = $item.index(); if ( $item.hasClass('large') && index % 2 ) { order = index + 1.5; } else { order = index; } return order; } }, sortBy : 'fitOrder' }); $items.click(function(){ var $this = $(this); // nothing to change if this already has large class if ( $this.hasClass('large') ) { return; } var $previousLargeItem = $items.filter('.large'); $previousLargeItem.removeClass('large'); $this.addClass('large'); $container // update sort data on changed items .isotope('updateSortData', $this ) .isotope('updateSortData', $previousLargeItem ) // trigger layout and sort .isotope(); }); });
<div id="container"> <div class="item large">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> </div>
body { font-family: 'Helvetica Neue', Arial, sans-serif; } #container { border: 2px solid; padding: 5px; width: 400px; height: 160px; } .item { width: 70px; height: 70px; background: #26D; float: left; margin: 5px; color: white; font-size: 60px; } .item.large { width: 150px; height: 150px; background: #2D6; z-index: 10; } .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; }