I have a simple masonry layout. And need to change elements size and position on click.

Here is a jsfiddle: / and the code:

JS

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

    $('.box').click(function(){
        $('.box').width(100).height(100);
        $(this).width(300).height(300);

        $('#container').isotope('reLayout');
    });
});​

CSS

#container {
    width: 400px;
}

.box {
    font-size: 28px;
    width: 100px;
    height: 100px;
}

/* omitted color classes */

HTML

<div id="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div class="box yellow">4</div>
    <div class="box black">5</div>
</div>​

The problem is that it isn't working correctly for element number 1 and number 3 (see images)

Element 1 clicked (solved: see answer)

Element 3 clicked

What am I doing wrong?

I have a simple masonry layout. And need to change elements size and position on click.

Here is a jsfiddle: http://jsfiddle/664cV/12/ and the code:

JS

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

    $('.box').click(function(){
        $('.box').width(100).height(100);
        $(this).width(300).height(300);

        $('#container').isotope('reLayout');
    });
});​

CSS

#container {
    width: 400px;
}

.box {
    font-size: 28px;
    width: 100px;
    height: 100px;
}

/* omitted color classes */

HTML

<div id="container">
    <div class="box red">1</div>
    <div class="box blue">2</div>
    <div class="box green">3</div>
    <div class="box yellow">4</div>
    <div class="box black">5</div>
</div>​

The problem is that it isn't working correctly for element number 1 and number 3 (see images)

Element 1 clicked (solved: see answer)

Element 3 clicked

What am I doing wrong?

• javascript
• jquery
• html
• jquery-masonry
• jquery-isotope

Share Improve this question Follow edited May 23, 2017 at 12:30 CommunityBot 111 silver badge asked Oct 19, 2012 at 12:10 LucaLuca 1,11811 gold badge1313 silver badges1919 bronze badges 9

• 1 So.... your JSfiddle is useless to us, it doesn't have the Isotope() plugin with it? (I assume it's a plugin...) – Barrie Reader Commented Oct 19, 2012 at 12:21
• See jsfiddle/MTxXZ/1 explaining the usual problem with multi-column elements stackoverflow./a/11701171/963514. Your fiddle does not work, but your screenshots show the issue. If you have non-column coherent or multi-column items, on various browser window sizes, you may have empty spaces. – Systembolaget Commented Oct 19, 2012 at 12:47
• I will update the fiddle asap. – Luca Commented Oct 19, 2012 at 12:55
• @Neurofluxation I replaced github external reference with the one in the official plugin page. Now it should work. – Luca Commented Oct 19, 2012 at 13:45
• @Systembolaget so the short answer is: "it just works this way"? – Luca Commented Oct 19, 2012 at 13:55

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 3

You need to set the masonry first item width so that, once re-sized, isotope will remember this settings instead of the new first item width keeping the grid consistent.

Sadly, item number three still leaves an empty space, but I think that is isotope's standard behavior since it puts the fourth item up to the first, free, row, in that case row number one.

masonry: {
    columnWidth: 100
}

In fact, if you click on the box number 7, it leave an empty space as well. It would be nice to find a solution to that default behavior too.

<div class="box red">6</div>
<div class="box blue">7</div>
<div class="box green">8</div>
<div class="box yellow">9</div>
<div class="box black">10</div>

masonry and isotope maximize only columns. You can find an explanation from the wookmark jquery plugin. When you want to maximize columns and rows you need something else.

1. http://www.quora./Pinterest/What-technology-is-used-to-generate-pinterest-s-absolute-div-stacking-layout
2. http://www.benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

I just ran into this problem myself and fixed it by adding an empty div at the top of the container with the same selector as my masonry items, then added the css:

.grid-item:first-child {
    width: 1px;
    height: 0;
    padding: 0;
}

If you're wondering if this will result in your first item being shifted right by a pixel, the answer is no. I'm guessing this is because the height is 0, so it takes up no space. I wish this didn't involve adding unnecessary HTML, but it seems to work pretty well.