Isotope+Packery+LazyLoad.js标签筛选后布局错乱问题求助

问题现象 #

• 图片画廊初始加载正常，但切换标签后点击「全部」按钮，布局出现错乱
• 尝试使用Packery文档推荐的imagesLoaded方案解决懒加载导致的布局问题，代码出现报错
• 核心需求：实现标签筛选+懒加载+Packery瀑布流布局的协同工作

原代码 #

jQuery(function ($) {


    var $grid = $('.isotope-list').packery({
        layoutMode: 'packery',
        filter: '*',
        itemSelector: '.isotope-item',
        gutter: 0,
    });
    
    $(window).on('load',function(){
        $grid.packery('layout');
    });

    imagesLoaded( $grid ).on( 'progress', function() {
        pckry.layout();
    });  

    $('.filters li').click(function(){
        //css button styling
        $('.filters li').removeClass('current');
        $(this).addClass('current');
        
        // set isotope filter
        var selector = $(this).attr('data-filter');
        $grid.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         $grid.packery('layout');
         return false;
    }); 

    var $win = $(window),
        $imgs = $("img"),

    $loadVisible = function($els, trigger) {
        $els.filter(function () {
            var rect = this.getBoundingClientRect();
            return rect.top >= 0 && rect.top <= window.innerHeight;
        }).trigger(trigger);
    }

    $grid.packery('on', 'layoutComplete', function () {
        $loadVisible($imgs, 'lazylazy');
        $grid.packery('layout');
    });

    $win.on('scroll', function () {
        $loadVisible($imgs, 'lazylazy');
    });

    $win.on('resize', function () {
        $grid.packery('layout');
    });

    $imgs.lazyload({
        effect: "fadeIn",
        failure_limit: Math.max($imgs.length - 1, 0),
        event: 'lazylazy'
    });
});

错误点分析 #

1. imagesLoaded调用错误：代码中使用pckry.layout()，但pckry变量从未定义，应使用初始化的$grid调用布局方法
2. Isotope与Packery方法混淆：用Packery初始化实例，却调用Isotope的filter方法，二者API不兼容（Packery本身无筛选功能，需通过Isotope集成）
3. 布局回调循环调用：layoutComplete回调中再次调用layout，会触发无限布局循环，导致抖动或错乱
4. 筛选后懒加载触发滞后：标签切换后未主动触发新显示元素的懒加载，导致图片未加载就计算布局

修正后的代码 #

jQuery(function ($) {
    // 正确初始化：用Isotope集成Packery布局，支持筛选功能
    var $grid = $('.isotope-list').isotope({
        layoutMode: 'packery',
        itemSelector: '.isotope-item',
        gutter: 0,
        packery: {
            gutter: 0
        }
    });
    
    // 监听图片加载进度，实时更新布局
    imagesLoaded($grid).on('progress', function () {
        $grid.isotope('layout');
    });

    $(window).on('load', function(){
        $grid.isotope('layout');
    });

    $('.filters li').click(function(){
        $('.filters li').removeClass('current');
        $(this).addClass('current');
        
        var selector = $(this).attr('data-filter');
        // 使用Isotope原生filter方法实现筛选
        $grid.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        // 筛选动画完成后，触发懒加载并重新布局
        setTimeout(function() {
            $loadVisible($imgs, 'lazylazy');
            $grid.isotope('layout');
        }, 750);
        return false;
    }); 

    var $win = $(window),
        $imgs = $("img");

    // 懒加载触发逻辑
    var $loadVisible = function($els, trigger) {
        $els.filter(function () {
            var rect = this.getBoundingClientRect();
            return rect.top >= 0 && rect.top <= window.innerHeight;
        }).trigger(trigger);
    }

    $grid.isotope('on', 'layoutComplete', function () {
        $loadVisible($imgs, 'lazylazy');
        // 移除重复布局调用，避免循环
    });

    $win.on('scroll', function () {
        $loadVisible($imgs, 'lazylazy');
    });

    $win.on('resize', function () {
        $grid.isotope('layout');
    });

    $imgs.lazyload({
        effect: "fadeIn",
        failure_limit: Math.max($imgs.length - 1, 0),
        event: 'lazylazy'
    });
});

关键修改说明 #

• 初始化逻辑调整：改用Isotope初始化，指定Packery为布局模式，确保筛选功能正常工作
• 修复imagesLoaded报错：将pckry.layout()替换为$grid.isotope('layout')，匹配正确的API调用
• 优化筛选后处理：在筛选动画完成后触发懒加载并重新布局，保证新显示的图片加载后再计算布局
• 移除循环布局：删除layoutComplete中的重复布局调用，避免布局抖动
• 修复语法隐患：修正变量声明处的逗号错误，避免潜在语法问题

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