$(function(){ var $container = $('#container'), colW = 60, createItems = function(){ var items = '', widthClass, heightClass; for ( var i=0; i<3; i++ ) { widthClass = Math.random()*10 > 6 ? 'w2' : 'w1'; heightClass = Math.random()*10 > 6 ? 'h2' : 'h1'; items += '<div class="item ' + widthClass + ' ' + heightClass + '"/>' } return items; }; $container.isotope({ masonry: { columnWidth: 60 } }); var isotopeData = $container.data('isotope'), // use .css() or .animate() applyStyleFnName = isotopeData.applyStyleFnName, aniOpts = { queue: false, duration: 800 }; $('#add-items').click(function(){ var $newItems = $( createItems() ), // set position Isotope-wise with progressive enhancement // uses un-documented getPositionStyles method // which returns CSS transforms translate, or top/left position newStyle = $container.isotope( 'getPositionStyles', $container.width(), $container.height() ); $.extend( newStyle, isotopeData.options.hiddenStyle ); // apply style $newItems.css( newStyle ); $container.append( $newItems ).isotope( 'appended', $newItems ); // fade new items to full opacity $newItems[ applyStyleFnName ]( isotopeData.options.visibleStyle, aniOpts); }); });
#container { padding: 5px; margin: 0 auto; border: 2px solid black; } .item { float: left; background: #CCC; margin: 5px; width: 50px; height: 50px; } .item.w2 { width: 110px; } .item.h2 { height: 110px; } .isotope, .isotope .isotope-item { /* change duration value to whatever you like */ -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; }
<div id="container"> <div class="item w1 h2"></div> <div class="item w1 h1"></div> <div class="item w1 h1"></div> <div class="item w2 h2"></div> <div class="item w1 h2"></div> <div class="item w1 h1"></div> <div class="item w1 h1"></div> </div> <p><button id="add-items">Add items</button></p>