流體網格和不同元素大小的同位素

Question

我正嘗試爲網站的內容創建一個使用同位素（http://isotope.metafizzy.co）和流體佈局網格（http://unsemantic.com/）的網站。我希望它完全是這樣的：http://www.aarontolley.co.uk/

只應該是不同於aarontolley網站和我創建的網站的東西是元素將有不同的高度和寬度。

我現在有如下（用於測試，因此內嵌樣式）：

<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> 

沒有同位素，標記看起來是這樣的：

並與同位素啓用，它看起來像這樣：

這可能嗎？ :-)

Answer 1

我設法通過電網從http://responsivegridsystem.com/解決這個，然後使用以下設置從同位素切換到http://masonry.desandro.com/：

<script> 
    $(function() { 
     var $container = $('#container'); 
     $container.masonry({ 
      columnWidth: 1, 
      isAnimated: true, 
      itemSelector: '.element' 
     }); 
    }); 
</script> 

不知何故，columnWidth: 1奏效了;-)

唯一不利的是，我不得不將jQuery從最新版本降級到1.8.3 :-)但我肯定能忍受這一點。

工作網格屏幕：http://www.screenr.com/zWV7