0

I use Masonry to have a fluid tile based grid. In this grid, I want no gutters and I want to have 3 different kind of tiles: 1x1, 2x1, 2x2 an 1x2. I have this working but the only problem I have is that Masonry seems to start up with some gutter in between the tiles. If I resize my window a bit, these tiles get the proper size and no gutter.

Heres my html:

<div class="masonry js-masonry"  data-masonry-options='{"itemSelector": ".item" }'>
  <div class="grid-sizer"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;" ></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2 h3" style="background:url('images/img-3.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
  <div class="item w2" style="background:url('images/img-2.png'); background-size:100% 100%;"></div>
  <div class="item w2 h3" style="background:url('images/img-3.png'); background-size:100% 100%;"></div>
  <div class="item w1" style="background:url('images/img-1.png'); background-size:100% 100%;"></div>
</div>

My CSS

.masonry {
  background: #EEE;
  width: 100%;
}
.masonry .item,
.masonry .grid-sizer {
  width:  25%;
}
.masonry .item,
.masonry .grid-sizer {
  height: 60px;
  float: left;
}       
.item { width:  25%; }
.item.w2 { width:  50%;}

And some Javascript for resizing the window and getting the proper height of the tiles:

var tileHeight = 0;

$(function(){
    $(window).resize(function() {
        onResize();
    });
    onResize();
});


function onResize(){
    tileHeight = $(".grid-sizer").width();
    $(".item").each(function(){
        var $this = $(this);
        if($this.hasClass("h2")){
            $this.height(tileHeight*2);
        } else if($this.hasClass("h3")){
            $this.height(tileHeight*3);
        } else{
            $this.height(tileHeight);
        } 
    });
};

And here is a screenshot:

gutter on page load

And after I resize it looks the way it should:

enter image description here

Bart Burg
  • 4,786
  • 7
  • 52
  • 87

1 Answers1

1

I had a similar problem and 2 things seems to solved it. First add the pic dimensions height and width to each surrounding div of the pic in the grid. Second call masonry.reload() or masonry.appended to tell masonry it has changed. You can als try packagery or wookmark jquery plugin. There are many more not so famous. Check my answer:Masonry images overlapping issue.

Community
  • 1
  • 1
Micromega
  • 12,486
  • 7
  • 35
  • 72