JavaScript实现响应式串珠连线效果代码失效问题求助

问题原因 #

你的代码存在三个核心错误导致功能未生效：

• 读取spanBg.style.left只能拿到元素内联样式的left值，初始状态下该属性为空字符串，直接做减法运算会得到非数字值，样式设置完全无效。
• 仅统计了第一行的元素数量作为全局每行计数，flex响应式折行后最后一行元素数量通常和第一行不一致，按固定值判断所有行的末尾元素逻辑不成立。
• 父级容器.container > div没有设置overflow: hidden，偏移连线后超出容器的部分不会被隐藏，看不到预期效果。

修复代码 #

CSS补充

给每个珠子的父容器增加超出隐藏属性：

.container > div {
  width: 70px;
  height:70px;
  position:relative;
  overflow: hidden; /* 新增属性 */
}

修复后JS代码

const moveBackgrounds = () => {
    const divs = document.querySelectorAll('.container div');
    if (!divs.length) return;

    const getY = (elem) => {
        const elemRect = elem.getBoundingClientRect();
        return elemRect.top + window.scrollY;
    }

    // 按y坐标将所有珠子分组到对应行
    const rows = [];
    let currentRowY = getY(divs[0]);
    let currentRow = [];
    divs.forEach(div => {
        const y = getY(div);
        if (y !== currentRowY) {
            rows.push(currentRow);
            currentRow = [];
            currentRowY = y;
        }
        currentRow.push(div);
    });
    rows.push(currentRow);

    // 逐行处理每行末尾元素的连线
    rows.forEach(row => {
        row.forEach((div, index) => {
            const spanBg = div.querySelector('.bg');
            spanBg.style.left = index === row.length - 1 ? '-20px' : '0px';
        })
    })

    // 单独处理全局最后一个元素的多余连线
    const lastBg = divs[divs.length - 1].querySelector('.bg');
    lastBg.style.left = '-20px';
}

window.addEventListener("resize", moveBackgrounds);
window.addEventListener("load", moveBackgrounds);

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