我在Webflow中使用Isotope，但一切正常，但有一件事情，Isotope似乎劫持了动态项目的样式，默认情况下，它展开了一个音频播放器容器，该容器将下面的其他项目压入，但是应用了Isotope代码翻到下一个。 我认为我应该将动态项目更改为静态项目，并解决了该问题：

$(function(){
$('.w-dyn-item').css('position','static');
});

但是现在我有另一个问题，在应用过滤时，网格的高度正在改变，然后我的网站页脚突入项目中。

所以我尝试将高度自动添加到网格：

$(function(){
  $('.grid').css('height','auto');
});

这解决了初始页面加载的问题，但是，一旦我尝试进行一些过滤，它就会再次出现在页脚中。

这是页面Welch

我当时不知道该怎么办 请帮忙!!!

完整代码

<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>
<script>
// document ready wrapper
$(document).ready( function() {

  // find all filter buttons
  const filterToggles = document.querySelectorAll('[data-filter]');

  // go over each filter button
  filterToggles.forEach(function(toggle) {
    
    let attrVal = toggle.getattribute(['data-filter']); // find the filter attr
    let newVal = attrVal.toLowerCase().replace(' ','-'); // hyphenate filter attr val
    toggle.setattribute('data-filter',newVal); // set filter attr with new val
    
  });

  // go over all collection item category label elems
  $('.w-dyn-item .category').each(function(index,element) {
        var _this = $( element );
      // lowercase,hyphenate and add as a class to dyn-item for isotope filtering
        _this.closest('.w-dyn-item').addClass( _this.text().toLowerCase().replace(' ','-'));      
  });


  // quick search regex
  let qsRegex;
  let buttonFilter;

  // init Isotope
  const $grid = $('.grid').isotope({
      layoutMode: 'fitRows',itemSelector: '.w-dyn-item',stagger: 30,filter: function() {
        var $this = $(this);        
        var searchResult = qsRegex ? $this.text().match( qsRegex ) : true;
        var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
        return searchResult && buttonResult;
        }
  });

  // reveal all items after init
  const $items = $grid.find('.w-dyn-item');
  $grid.addClass('is-showing-items').isotope( 'revealItemElements',$items );

  $('#filters').on('click','button',function() {
      buttonFilter = $( this ).attr('data-filter');
      $grid.isotope();
  });

  // use value of search field to filter
  const $quicksearch = $('#quicksearch').keyup(debounce(function() {
    qsRegex = new RegExp($quicksearch.val(),'gi');
    $grid.isotope();
  }));

  // change is-checked class on buttons
  $('.button-group').each(function( i,buttonGroup ) {
    const $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click',function() {
      $buttonGroup.find('.is-checked').removeclass('is-checked');
      $( this ).addClass('is-checked');
    });
  });


  // debounce so filtering doesn't happen every millisecond
  function debounce(fn,threshold) {
      let timeout;
      return function debounced() {
        if ( timeout ) {
          clearTimeout( timeout );
        }
        function delayed() {
          fn();
          timeout = null;
        }
        setTimeout( delayed,threshold || 100 );
      };
  };


  // disable search from submitting
  $('#quicksearch').on('keyup keypress',function(e) {
    const keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
      e.preventDefault();
      return false;
    }
  });
    $(function(){
  $('.w-dyn-item').css('position','static');
});

 $(function(){
  $('.grid').css('height','auto');
});

});
</script>