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

Я пытаюсь создать сайт, используя изотоп (http://isotope.metafizzy.co) и гибкий макет. grid (http://unsemantic.com/) для содержания сайта. Я хочу, чтобы это было именно так: http://www.aarntolley.co.uk/

Единственное, что должно отличаться от сайта aarontoley и сайта, который я создаю, это то, что элементы будут иметь разную высоту и ширину.

Теперь у меня есть следующее (для тестирования, следовательно, встроенный стиль):

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

Без изотопа разметка выглядит так:

Разметка без изотопа

А с включенным изотопом это выглядит так:

Разметка с изотопом

Это вообще возможно? :-)


javascript html fluid-layout jquery-isotope
person bomortensen    schedule 06.05.2013    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Мне удалось решить эту проблему, используя сетку из 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

person bomortensen    schedule 06.05.2013