Изотоп с жидкостной сеткой и различными размерами элементов

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