После установки isopote filter не правильно отображается сайт в чём проблема?

Question

[Cosmonaut .]

Здравствуйте добрые люди.
Установил Isotope filter, как только заходите на категорию который используется isotope filter не правильно отображается блоки а если обновить страницу либо заходить на другие категории например "интерьеры" проблема исчезает.

Comments

[2cha.headz]

попробуйте инициализацию изотопа обернуть в
$(document).ready(function(){ ... })

у вас похоже картинки не успевают загрузиться как изотоп начинает расставлять блоки

[Cosmonaut .]

вот весь js код, а как обернуть ?)

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
});
// filter functions
var filterFns = {
  // show if number is greater than 50
  numberGreaterThan50: function() {
    var number = $(this).find('.number').text();
    return parseInt( number, 10 ) > 50;
  },
  // show if name ends with -ium
  ium: function() {
    var name = $(this).find('.name').text();
    return name.match( /ium$/ );
  }
};
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
  var filterValue = $( this ).attr('data-filter');
  // use filterFn if matches value
  filterValue = filterFns[ filterValue ] || filterValue;
  $grid.isotope({ filter: filterValue });
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

[2cha.headz]

Cosmonaut .,

$(document).ready(function(){

    // init Isotope
    var $grid = $('.grid').isotope({
      itemSelector: '.element-item',
    });
    // filter functions
    var filterFns = {
      // show if number is greater than 50
      numberGreaterThan50: function() {
        var number = $(this).find('.number').text();
        return parseInt( number, 10 ) > 50;
      },
      // show if name ends with -ium
      ium: function() {
        var name = $(this).find('.name').text();
        return name.match( /ium$/ );
      }
    };
    // bind filter button click
    $('.filters-button-group').on( 'click', 'button', function() {
      var filterValue = $( this ).attr('data-filter');
      // use filterFn if matches value
      filterValue = filterFns[ filterValue ] || filterValue;
      $grid.isotope({ filter: filterValue });
    });
    // change is-checked class on buttons
    $('.button-group').each( function( i, buttonGroup ) {
      var $buttonGroup = $( buttonGroup );
      $buttonGroup.on( 'click', 'button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
      });
    });

}