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

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

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

Stacked images after loading of the page in isotope

javascript

jquery

html

image

jquery-isotope