JQuery Isotope: жидкостная сетка не работает правильно с элементами разных размеров

Question

У нас есть сетка с разными размерами в штучной упаковке (4 стиля).

• Стиль коробки 1: Ширина 200 пикселей Высота 200 пикселей
• Стиль коробки 2: Ширина 100 пикселей Высота 100 пикселей
• Стиль коробки 3: Ширина 200 пикселей Высота 100 пикселей
• Стиль коробки 4: ширина 100 пикселей высота 200 пикселей

Мы попытались использовать тот же пример, что и на следующей странице с кладкой в ​​режиме макета: http://isotope.metafizzy.co/layout-modes.html

Но, к сожалению, мы не можем заставить его работать так же. Вот jsfiddle к нашему коду: http://jsfiddle.net/x38jgn75/

HTML:

<div id="container">
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box4"></div>
    <div class="box box3"></div>
    <div class="box box3"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box3"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box4"></div>
</div>

CSS:

#container {
    width: 400px;
}
.box1 {
    background-color: red;
    width: 200px;
    padding-bottom: 50%;
}
.box2 {
    background-color: yellow;
    width: 100px;
    padding-bottom: 25%;
}
.box3 {
    background-color: blue;
    width: 200px;
    padding-bottom: 25%;
}
.box4 {
    background-color: green;
    width: 100px;
    padding-bottom: 50%;
}

JS:

$(function () {
    var $container = $('#container');
    $container.isotope({
        itemSelector: '.box'
    });
});

Заранее спасибо.

Answer 1

Документация для режима кладки гласит, что вам нужно указать ширину столбца.

В своей скрипке попробуйте это:

$container.isotope({
    // options
    itemSelector: '.box',

    masonry: {
        columnWidth: 100
    }
});

Пример здесь: http://jsfiddle.net/x38jgn75/1/