Question

我有带图片的页面和基于isotope技术的过滤器。问题是，在加载页面后，图像被堆叠。在使用过滤器（选项a，b，c）之后，图像会按预期展开。

$(function() {
    var grid = $('#portfolio .grid').isotope({
        itemSelector: '.work',
        layoutMode: 'fitRows'
    });

    $('#portfolio .filter').on( 'click', 'button', function() {
        var el = $(this);

        grid.isotope({
            filter: el.data('filter')
        });

        el.addClass('checked').siblings().removeClass('checked');
    });
});

jsfiddle link

在Firefox中模拟第一次加载命中 CTRL + F5 或 Shift + Cmd + R 在Mac上。

我使用link尝试了此修复程序。图像未堆叠，但现在过滤器已损坏。

$(function() {
    var grid = $('#portfolio .grid').isotope({
        itemSelector: '.work',
        layoutMode: 'fitRows'
    });

    // recommendation found at isotope.metafizzy.co/layout.html#imagesloaded
    $grid.imagesLoaded().progress( function() {
        $grid.isotope('layout');
    });

    $('#portfolio .filter').on( 'click', 'button', function() {
        var el = $(this);

        grid.isotope({
            filter: el.data('filter')
        });

        el.addClass('checked').siblings().removeClass('checked');
    });
});

jsfiddle link

如何删除堆叠的图像并使用过滤器？

Answer 1

第二个jsfiddle有两个问题：

        $(function() {
            var grid = $('#portfolio .grid').isotope({
                itemSelector: '.work',
                layoutMode: 'fitRows'
            });

            // recommendation found at isotope.metafizzy.co/layout.html#imagesloaded
            $grid.imagesLoaded().progress( function() {
                $grid.isotope('layout');
            });

            $('#portfolio .filter').on( 'click', 'button', function() {
                var el = $(this);

                grid.isotope({
                    filter: el.data('filter')
                });

                el.addClass('checked').siblings().removeClass('checked');
            });
        });

https://jsfiddle.net/martinrusina/eLf4ynna/13/

首先，$ grid未定义。您定义的网格不是$ grid。

其次，你还没有包含imagesLoaded库来处理同位素，所以imagesLoaded也是未定义的。

这是一个包含库并使用网格而不是$ grid的工作版本：

// Includes https://unpkg.com/imagesloaded@4.1.1/imagesloaded.pkgd.min.js

        $(function() {
            var grid = $('#portfolio .grid').isotope({
                itemSelector: '.work',
                layoutMode: 'fitRows'
            });

            // Updates grid after each image being loaded
            //grid.imagesLoaded().progress( function() {
            //  grid.isotope('layout');
            //});

            // updates grid after all images are loaded.
            grid.imagesLoaded( function() {
              grid.isotope('layout');
            });

            $('#portfolio .filter').on( 'click', 'button', function() {
                var el = $(this);

                grid.isotope({
                    filter: el.data('filter')
                });

                el.addClass('checked').siblings().removeClass('checked');
            });
        });

Working jsfiddle

在同位素中加载页面后堆叠的图像

1 个答案: