javascript - 具有流体网格和不同元素尺寸的同位素

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