javascript - Isotope with fluid grid and different element sizes -

i trying create site using isotope (http://isotope.metafizzy.co) , fluid layout grid (http://unsemantic.com/) content of site. want this: http://www.aarontolley.co.uk/

only thing should different aarontolley site , site i'm creating elements have different heights , widths.

what have following (for testing, hence inline styling):

<div id="container" class="grid-container">     <div class="element grid-33" style="margin-bottom:20px;">         <div style="height:150px; background-color:red;">test</div>     </div>     <div class="element grid-33" style="margin-bottom:20px;">         <div style="height:150px; background-color:red;">test</div>     </div>     <div class="element grid-33" style="margin-bottom:20px;">         <div style="height:150px; background-color:red;">test</div>     </div>     <div class="element grid-66" style="margin-bottom:20px;">         <div style="height:300px; background-color:red;">test</div>     </div>     <div class="element grid-33" style="margin-bottom:20px;">         <div style="height:150px; background-color:red;">test</div>      </div>  </div>  <script>     $(function() {         $('#container').isotope();     }); </script> 

without isotope, markup looks this:

and isotope enabled, looks this:

is possible @ all? :-)

i managed solve using grid http://responsivegridsystem.com/ , switched isotope http://masonry.desandro.com/ using following settings:

<script>     $(function() {         var $container = $('#container');         $container.masonry({             columnwidth: 1,             isanimated: true,             itemselector: '.element'         });     }); </script> 

somehow columnwidth: 1 did trick ;-)

only downside of had downgrade jquery latest version 1.8.3 :-) can sure live that.

screenr of working grid: http://www.screenr.com/zwv7