CODEWITHSUNDEEP
jquery-isotopepackery
aitor
aitor

Reputation: 2735

Isotope Packery layout makes an irregular gutter space

Problem

Example when browser reload contents (wrong gutter space)

Example when page reloads

Example after resize viewport (right zero gutter space)

Example after resize viewport

Here is the codepen example

Javascript

 $(document).ready(function() {
     var $grid = $('.grid').isotope({
       layoutMode: 'packery',
       itemSelector: '.grid-item',
       packery: {
         gutter: 0
       }
     });
 });

UPDATE

I have a codepen working with simplified HTML .grid-item and imageloaded(). Here it is.

I have not solution yet, but I'm getting close.

The .grid-item looks like this now:

<article class="grid-item col-sm-4 col-md-3 col-lg-2 pequena">
    <img width="699" height="466" src="http://stage.lolafonseca.com/app/uploads/2016/08/reforma-3-699x466.jpg" class="img-responsive wp-post-image" alt="reforma-3"/>
  </article>

Any help will be appreciated.

Upvotes: 1

Views: 491

Answers (1)

aitor
aitor

Reputation: 2735

Finally, I got it. The problem was solved with imagesLoaded() (I was trying it without install imagesLoaded library and, obviously, it didn't work. I didn't know it was a library separated of Isotope). After install the library, all works.

http://codepen.io/aitormendez/pen/YGWoaP

$(document).ready(function() {
  var $grid = $('.grid').isotope({
    layoutMode: 'packery',
    itemSelector: '.grid-item',
    packery: {
      gutter: 0
    }
  });
  $grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});
});

Upvotes: 1

Related Questions