Javascript 代码在调整窗口大小时可以完美执行，但使用“窗口还原”按钮会导致不同的结果

我创建了我自己版本的CSS网格，因为一些浏览器不支持它，所以我创建了一个解决方案，可以在我希望它工作的所有浏览器上工作，以解释更多我的意思，我基本上希望创建一种使图像不受影响的方法

收缩父容器时留下不必要的空间，换句话说，每次调整窗口大小时，都会计算父容器和图像周围的空间，以重新调整窗口大小，使其看起来像是使用CSS网格或类似的flex结构

所以我意识到我想把重点放在一个带有滚动条的父div上，但是这次父容器将有一个设置的高度，所以在添加了更多代码之后，我认为我成功地做到了

然后我按下恢复按钮

不知道返回到上一个窗口大小的未知结果，该窗口大小的父容器带有一个滚动条，可以通过我的网格模拟完美地计算出来。我开始注意到，每当我使用“还原”按钮调整到以前的窗口大小时，我的网格模拟方法就会停止工作

因此，只要我通过鼠标拖动来调整窗口大小，我的脚本就会重新开始工作。这就是我通过拖动来调整窗口大小所注意到的。它在DOM中生成特定的宽度大小。看看上面写着id='photo-gallery'

“还原”按钮更改其宽度

根据我的经验

window.addEventListener('resize',function name);

使用“还原”按钮并通过拖动来调整窗口大小如何解决此问题？我基本上希望恢复情况与通过拖动调整窗口大小相同

请不要建议使用其他CSS方法。就像我说的，我选择这种方法是因为这种方法适用于某些不支持CSS网格方法和CSS flex方法的浏览器

这是我的密码

document.addEventListener（'DOMContentLoaded'，function（）{
/**/
/*
注意：CSS网格或flex不能正常工作或根本不能工作
对于某些浏览器中的DOM，例如某些版本的IE
和其他浏览器等…所以这是一个修复有一个模拟网格
就像JS中的结构一样。让它在浏览器上工作
那不好用还是那不好
使用CSS网格或
柔性结构。
*/
//
//创建测量节点
var scrollDiv=document.createElement（“div”）；
scrollDiv.className=“滚动条测量”；
document.body.appendChild（scrollDiv）；
//
//获取滚动条的宽度
var scrollbarWidth=scrollDiv.offsetWidth-scrollDiv.clientWidth；
//
//删除DIV
document.body.removeChild（scrollDiv）；
//
/*将此全局变量作为数字数据类型引用
所以它可以在下面的条件下使用
浏览器滚动条宽度与
模拟网格*/
var scrollbarWidthResult=编号（scrollbarWidth）；
/**/
//
//
window.addEventListener（'resize'，checkIfAVerticalScrollbarIsPresence）；
函数检查垂直滚动BarisPresence（）{
var photoGallery=document.querySelector（“#照片库”）；
如果（photoGallery.scrollHeight>photoGallery.clientHeight）{
var scrollbarWidthResult=编号（scrollbarWidth）；
/*在照片库容器中检测到滚动条。生成JS模拟
并使用滚动条的宽度大小进行计算*/
var w=parseFloat（getComputedStyle（document.body）.width）*0.6；
var时间=数学四舍五入（w/150）；
var iw=w/次；
Array.prototype.forEach.call（
document.querySelectorAll（“#照片库img”），
功能（照片引擎）{
照片_engine.style.width=iw+‘px’；
document.querySelector（“#照片库”）.style.width=（iw*倍+1+滚动条宽度结果）+“px”；
}
);
/**/
}
否则{
/*在照片库容器中未检测到垂直滚动条。请生成
无需滚动条计算的网格状模拟*/
var w=parseFloat（getComputedStyle（document.body）.width）*0.6；
var时间=数学四舍五入（w/150）；
var iw=w/次；
Array.prototype.forEach.call（
document.querySelectorAll（“#照片库img”），
功能（照片引擎）{
照片_engine.style.width=iw+‘px’；
document.querySelector（“#照片库”）.style.width=（iw*times+1）+“px”；
}
);
//
}
}
选中垂直滚动条BarisPresence（）；
//
/**/
});
。滚动条测量{
宽度：100px；
高度：100px；
溢出：滚动；
位置：绝对位置；
top:-9999px；/*
这是一个纯css示例，希望它能帮助您：


*{
-webkit框大小：边框框；
框大小：边框框；
}
.集装箱{
宽度：100%；
}
.集装箱{
利润率：6px0；
填充：0 6px；
浮动：左；
宽度：16.66666%；
}
.集装箱.画廊{
边框：1px实心#ccc；
}
.集装箱.画廊图片{
宽度：100%；
高度：自动；
}
@介质（最大宽度：1200px）{
.集装箱{
宽度：16.66666%！重要；
}
}
@介质（最大宽度：992px）{
.集装箱{
宽度：24.99999%！重要；
}
}
@介质（最大宽度：768px）{
.集装箱{
宽度：49.99999%！重要；
}
}
@介质（最大宽度：576px）{
.集装箱{
宽度：100%！重要；
}
}
这是一篇很好的帖子。我同意CSS是解决类似问题的解决方案，但在特定情况下，如果目标浏览器不支持某些CSS方法，那么我可以看到使用JavaScript来模拟不受支持的CSS方法会有多大帮助

我现在解决了恢复按钮的问题。它现在应该可以工作了

我还注意到这个脚本还有一个问题，是我无意中发现的