响应式商品列表点击后弹窗位置适配窗口尺寸的实现方案

我懂你这个需求——就是要让商品列表的内嵌弹窗在响应式布局下，不管窗口怎么缩放，都能精准显示在当前点击项所在行的最后一个位置对吧？你之前的代码固定死了4列，所以窗口尺寸变化后就没法适配，咱们可以从这几个地方调整：

1. 动态获取当前列数 #

首先得有一个能根据当前窗口尺寸/布局，返回对应列数的函数，两种实现方式任你选：

方式一：基于设计断点（适合固定响应式断点的场景）

function getCurrentColumnCount() {
  const viewportWidth = $(window).width();
  if (viewportWidth >= 1200) {
    return 4; // 桌面端4列
  } else if (viewportWidth >= 768) {
    return 3; // 平板端3列
  } else {
    return 2; // 移动端2列
  }
}

方式二：基于实际布局计算（更灵活，适合自适应列数的场景）

这种方式会自动计算容器里能放下多少个列表项，不用硬编码断点：

function getCurrentColumnCount() {
  const $productList = $(".products");
  const $firstItem = $productList.find("li").first();
  
  if (!$firstItem.length) return 4; // 没有列表项时的兜底默认值
  
  const containerWidth = $productList.width();
  // 获取列表项的总宽度（包含margin、padding）
  const itemTotalWidth = $firstItem.outerWidth(true);
  
  // 计算每行能容纳的列数，向下取整
  return Math.floor(containerWidth / itemTotalWidth);
}

2. 重构点击事件逻辑，用动态列数计算弹窗位置 #

你之前的do-while循环可以简化成更直观的数学计算，直接定位到当前行的最后一个位置：

// 缓存弹窗元素，避免重复DOM查询
const $productPopup = $(".product-popup");
// 初始隐藏弹窗
$productPopup.hide();

$(".products li").click(function(e) {
  e.preventDefault();
  const $activeItem = $(this);
  
  // 重置所有列表项的激活状态
  $(".products li").removeClass("active");
  $activeItem.addClass("active");
  
  // 获取当前列数
  const colCount = getCurrentColumnCount();
  // 当前项的0-based索引（jQuery的index()从0开始）
  const itemIndex = $activeItem.index();
  // 计算当前行最后一个项的1-based位置（因为nth-child是1-based语法）
  const insertPos = Math.ceil((itemIndex + 1) / colCount) * colCount;
  
  // 移动弹窗到目标位置并显示
  $(".products li:nth-child(" + insertPos + ")").after($productPopup);
  $productPopup.show();
  $productPopup.find("span").text(insertPos);
});

3. 监听窗口resize，动态调整弹窗位置 #

窗口缩放时，需要重新计算列数并调整弹窗位置，同时加上防抖函数避免频繁触发计算：

// 防抖函数：避免resize事件连续触发时重复执行逻辑
function debounce(func, delay = 250) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 监听窗口resize事件
$(window).resize(debounce(function() {
  // 如果弹窗没显示，直接跳过
  if (!$productPopup.is(":visible")) return;
  
  const $activeItem = $(".products li.active");
  // 没有激活的列表项也跳过
  if (!$activeItem.length) return;
  
  // 重新计算列数和插入位置
  const colCount = getCurrentColumnCount();
  const itemIndex = $activeItem.index();
  const insertPos = Math.ceil((itemIndex + 1) / colCount) * colCount;
  
  // 更新弹窗位置和显示的数值
  $(".products li:nth-child(" + insertPos + ")").after($productPopup);
  $productPopup.find("span").text(insertPos);
}));

这样修改后，不管窗口怎么调整，弹窗都会自动适配当前的列数，精准显示在点击项所在行的末尾，完全符合你的预期效果～

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