同位素滤镜动画来自随机位置

Question

我已经使用过滤器设置了Isotope，但是当点击过滤器时，我的同位素项目似乎是一个随机位置的动画。你可以在这里看到它 - http://ccmac.iamphiljames.co.uk/whats-on/events/

有谁知道为什么以及如何解决这个问题？

这是我的同位素召唤 -

  jQuery(window).load(function() {
      var $container = jQuery('.grid');
      $container.isotope({
          itemSelector: '.grid-item',
          percentPosition: true,
          masonry: {
              // use element for option
              columnWidth: '.grid-sizer'
          },
          filter: '*',
          animationOptions: {
              duration: 750,
              easing: 'linear',
              queue: false
          },
      });

      $container.isotope({
          getSortData: {
              name: function($elem) {
                  return $elem.find('time').attr('data-time');
              }
          },
          sortBy: 'name',
          sortAscending: true,
      });

这是我的过滤器 -

      jQuery('.filters-button-group a').click(function() {
          jQuery('.filters-button-group .current').removeClass('current');
          jQuery(this).addClass('current');

          var selector = jQuery(this).attr('data-filter');
          $container.isotope({
              filter: selector,
              animationOptions: {
                  duration: 750,
                  easing: 'linear',
                  queue: false
              }
          });

          return false;
      });
  });

我在WordPress中使用事件管理器插件，它使用短代码创建一个post循环，这里是过滤器HTML和事件列表

echo '<div class="button-group filters-button-group">
            <h4>Filter by:</h4>
            <div class="buttonsInner">
                <a href="#" class="button current" data-filter="*">All</button>
                <a href="#"  class="button" data-filter=".Standard">Standard</button>
                <a href="#" class="button" data-filter=".Bandstand">Bandstand</button>
            </div>
            <div style="clear:both;"></div>
        </div>';

echo "<div class='css-events-list grid'>";

echo do_shortcode( '[events_list scope="all" order="DESC" category="-32"]

        <article class="grid-sizer grid-item eventOuter #_CATEGORYNAME">
            <div class="eventInner">
                #_EVENTIMAGE{my_custom_size}
                <div class="eventListInfo">
                    <h1 class="eventListTitle">#_EVENTLINK</h1>
                    <data class="date" data-time="#{Y-m-d}">#_{d M Y} #@_{- d M Y} </data>
                    <p>#_EVENTEXCERPT{12,...} <a href="#_EVENTURL">Event details</a></p>
                </div>
            </div>
        </article>
[/events_list]' );

和我的CSS -

.grid { position:relative; }
.grid-sizer,
.grid-item { width: 33.3333%; }

h1.eventListTitle { 
  font-size: 2em;
  line-height: 1.3em;
  margin-top: 0;
  margin-bottom: 0.7em;
}

.grid-item {
  z-index: 2;
}

.isotope-hidden.grid-item {
  pointer-events: none;
  z-index: 1;
}

.grid, .grid .grid-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
      transition-duration: 0.8s;
}

.grid {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
   -o-transition-property: height, width;
      transition-property: height, width;
}

.grid .grid-item {
   -webkit-transition-property: -webkit-transform, opacity;
   -moz-transition-property:    -moz-transform, opacity;
   -ms-transition-property:     -ms-transform, opacity;
   -o-transition-property:      -o-transform, opacity;
      transition-property:         transform, opacity;
}