如何将Masonry与Isotope相结合，并提供完全响应的解决方案+过滤和搜索

var container = document.querySelector('.grid');
var masonry = new Masonry(container, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

// 过滤和搜索功能
$('.filter-button-group').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

// 搜索功能
$('#search-input').on('keyup', function() {
  var searchValue = this.value.toLowerCase();
  $grid.isotope({ filter: function() {
    var itemName = $(this).find('.item-name').text().toLowerCase();
    return itemName.indexOf(searchValue) > -1;
  }});
});