CODEWITHSUNDEEP
javascriptjqueryhtmljquery-isotopefluid-layout
Yetispapa
Yetispapa

Reputation: 2296

jQuery Isotope: Fluid grid not working correctly with different sized elements

We have a grid with different sized boxed (4 styles).

We tried to use the same example like on the following page with layout mode masonry: http://isotope.metafizzy.co/layout-modes.html

But unfortunately we can't make it work the same way. Here's a jsfiddle to our code: 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'
    });
});

Thank you in advance.

Upvotes: 2

Views: 1111

Answers (1)

Paul
Paul

Reputation: 1502

The documentation for masonry mode states you need to specify a column width.

In your fiddle, try this:

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

    masonry: {
        columnWidth: 100
    }
});

Example here: http://jsfiddle.net/x38jgn75/1/

Upvotes: 1

Related Questions