为什么实现4/3比例图片画廊的jQuery代码在移动端失效？

问题原因 #

• 高度计算逻辑仅在页面DOM首次加载完成时执行一次，不会响应窗口尺寸变化：当你在桌面端加载页面后切换到移动视图、或者窗口尺寸发生改变时，不会重新计算适配新宽度的高度值。如果是直接在移动端打开页面，也可能因为DOM渲染时序问题，jQuery获取.gallery-item宽度时样式还没完全应用，拿到错误的宽度值。
• 移动端媒体查询里没有覆盖.gallery-item的flex属性：原CSS中.gallery-item设置了flex: 1 1 18%，当移动端flex方向改为column后，flex-basis的18%会作用于高度而非宽度，会干扰JS设置的高度规则。
• 额外的逻辑问题：lightbox的点击事件仅在页面加载时判断一次窗口宽度，如果你在桌面端加载页面后缩放到移动端，点击事件仍然会触发，不符合你移动端禁用点击的预期。

修复方案 #

方案1：优先推荐纯CSS实现固定比例，完全避免JS的时序/响应问题 #

给.gallery-item加如下规则，删掉原有JS的高度计算逻辑即可：

.gallery-item {
    flex: 1 1 18%;
    margin: 25px 0 0 25px;
    position: relative;
    /* 新增下面两行 */
    height: 0;
    padding-top: 75%; /* 3/4 = 75% 完美实现4:3比例 */
}

移动端媒体查询里的.gallery-item不需要额外修改，这个规则在flex column布局下依然生效。

方案2：如果一定要用JS实现，优化JS逻辑 #

把高度计算逻辑封装成函数，同时在DOM加载完成、窗口 resize 事件中都触发，同时调整点击事件的绑定逻辑：

// 封装高度计算函数
function calcGalleryHeight() {
    var gallery_item_width = $(".gallery-item").width();
    var gallery_item_height = (gallery_item_width / 4) * 3;
    $(".gallery-item").css("height", gallery_item_height);
}

$(document).ready(function() {
    calcGalleryHeight();
    // 窗口尺寸变化时重新计算，加防抖避免频繁触发
    var resizeTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(calcGalleryHeight, 100);
    });
    
    // 点击事件改成动态判断宽度，避免加载时一次判断的问题
    $(".trigger").click(function(){
        if ($(window).width() > 768) {
            $(this).find(".lightbox").toggle();
        }
    });
});

同时建议在移动端媒体查询里补充.gallery-item的flex属性重置，避免flex-basis干扰：

@media (max-width: 768px) {
    .gallery-item {
        margin: 0px 0px 25px 0px;
        flex: 0 0 auto; /* 新增这行 */
    }
}

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