如何在窗口缩至500px时修改JavaScript的Isotope fitWidth选项？

嘿，这个问题其实很容易解决——我们只需要监听窗口尺寸变化，动态调整Isotope的配置就行，我给你写个简单的实现：

步骤1：初始化时设置适配初始状态 #

首先在初始化Isotope的时候，先根据当前窗口宽度设置fitWidth的初始值，这样页面加载时就会直接适配当前设备的尺寸：

// 获取当前窗口宽度，判断是否需要开启fitWidth
const initialFitWidth = $(window).width() >= 500;

// 初始化Isotope
var $grid = $('#container').isotope({
  itemSelector: '.element',
  masonry: {
    columnWidth: '.element',
    fitWidth: initialFitWidth, // 初始值根据窗口宽度设置
    horizontalOrder: true
  },
  filter: function() {
    var $this = $(this);
    var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
    // 保留你原来的filter逻辑
    return searchResult;
  }
});

步骤2：监听窗口resize事件动态更新配置 #

接下来添加窗口尺寸变化的监听，每次窗口大小改变时，判断宽度是否小于500px，然后更新Isotope的配置：

// 监听窗口resize事件
$(window).on('resize', function() {
  const isWideEnough = $(window).width() >= 500;
  // 获取当前Isotope的fitWidth配置
  const currentFitWidth = $grid.isotope('getOption', 'masonry.fitWidth');
  
  // 只有当配置需要改变时才更新，避免不必要的重排
  if (isWideEnough !== currentFitWidth) {
    // 修改fitWidth配置
    $grid.isotope('setOption', 'masonry.fitWidth', isWideEnough);
    // 重新触发布局
    $grid.isotope('layout');
  }
});

可选优化：添加防抖减少性能消耗 #

如果觉得窗口resize事件触发太频繁（会导致多次重排），可以加个简单的防抖函数来优化：

// 简单的防抖函数，延迟执行回调
function debounce(func, delay = 250) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 用防抖包装resize处理函数
$(window).on('resize', debounce(function() {
  const isWideEnough = $(window).width() >= 500;
  const currentFitWidth = $grid.isotope('getOption', 'masonry.fitWidth');
  
  if (isWideEnough !== currentFitWidth) {
    $grid.isotope('setOption', 'masonry.fitWidth', isWideEnough);
    $grid.isotope('layout');
  }
}));

这样就完成了！当窗口宽度小于500px时，fitWidth会自动变成false，大于等于500px时又变回true，完全适配移动端和桌面端的不同需求。

内容的提问来源于stack exchange，提问作者Albeld