Isotope网格加载显示异常求助：加载刷新错位，排序/窗口调整后恢复

问题根源 #

Isotope初始化时页面图片还未完全加载，导致它无法获取图片真实尺寸，进而错误计算网格布局。而执行排序或窗口调整时，Isotope会触发重新布局逻辑，此时图片已加载完成、尺寸数据正确，所以布局恢复正常。

解决方案 #

方法1：等待所有图片加载完成后初始化Isotope #

把Isotope初始化代码放到$(window).load()回调里，确保所有资源（含图片）加载完毕再执行：

$(window).load(function() {
    $("[data-fancybox]").fancybox();

    $(".items").isotope({
        filter: '*',
        animationOptions: {
            duration: 1500,
            easing: 'linear',
            queue: false
        }
    });

    $("#filters a").click(function () {
        $("#filters .current").removeClass("current");
        $(this).addClass("current");

        var selector = $(this).attr("data-filter");

        $(".items").isotope({
            filter: selector,
            animationOptions: {
                duration: 1500,
                easing: 'linear',
                queue: false
            }
        });

        return false;
    });
});

方法2：用imagesLoaded插件配合初始化 #

这是Isotope官方推荐的方案，通过imagesLoaded库监听图片加载状态，确保布局计算基于真实尺寸：

$("[data-fancybox]").fancybox();

$(".items").imagesLoaded(function() {
    $(".items").isotope({
        filter: '*',
        animationOptions: {
            duration: 1500,
            easing: 'linear',
            queue: false
        }
    });
});

$("#filters a").click(function () {
    $("#filters .current").removeClass("current");
    $(this).addClass("current");

    var selector = $(this).attr("data-filter");

    $(".items").isotope({
        filter: selector,
        animationOptions: {
            duration: 1500,
            easing: 'linear',
            queue: false
        }
    });

    return false;
});

方法3：给图片设置固定宽高 #

如果图片尺寸固定，直接在CSS中给图片或容器设置明确宽高，让Isotope初始化时就能拿到正确尺寸：

.items .item img {
    width: 100%;
    height: 200px; /* 根据实际图片尺寸调整 */
    object-fit: cover; /* 保持图片比例不变形 */
}

验证 #

修改后刷新页面，Isotope会基于正确的图片尺寸初始化网格，直接实现每行4张图片的预期布局，无需手动触发排序或调整窗口。

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