具有流体网格和不同元素大小的同位素

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