IE 上的同位素排序问题

Question

我对 IE 上的同位素排序有疑问。一切正常，除了排序，它们都在一条水平线上，见下面的附件。

所以这是我的代码，其中包括初始化同位素、一些过滤内容、项目动画，以及向项目添加不透明度和 class。

(function($) {
    window.onload = function() {

        // Animation items
        $('.work .item').each(function(i) {
            var item = $(this);
            setTimeout(function() {
                item.addClass('is-showing');

                setTimeout(function() {
                    item.removeClass('hidden is-showing');
                }, 700);

            }, 150 * (i + 1));
        });

    };

    $.fn.hideReveal = function(options) {
        options = $.extend({
            timeout: 1000,
            filter: '*',
            hiddenStyle: {
                opacity: 0.2
            },
            visibleStyle: {
                opacity: 1
            },
        }, options);

        var that = this;

        that.each(function() {
            var $items = $(this).children();
            var $visible = $items.filter(options.filter);
            var $hidden = $items.not(options.filter);
            // reveal visible
            $visible.animate(options.visibleStyle, options.timeout);
            $visible.addClass("visible-item");
            // hide hidden
            $hidden.animate(options.hiddenStyle, options.timeout);
            $hidden.removeClass("visible-item");

            if (options.filter == '*') {
                jQuery('.visible-item').removeClass('visible-item');
            }
        });


        setTimeout(function() {

            that.isotope({
                getSortData: {
                    visible: function(elem) {
                        return !$(elem).hasClass("visible-item");
                    }
                },
                sortBy: 'visible'
            })

            that.isotope("updateSortData");
            that.isotope({
                sortBy: 'visible'
            });

        }, options.timeout);


    };

    $(function() {

        var $container = $('#isotope-list');
        $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            sortAscending: true
        });
      });

        // bind filter button click
        $('#filters').on('click', 'a', function() {
            var filterValue = $(this).attr('data-filter');

            $container.hideReveal({
                filter: filterValue,
                timeout: 500
            });
        });

        // change is-checked class on buttons
        $('#filters').each(function(i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on('click', 'a', function() {
                $buttonGroup.find('.selected').removeClass('selected');
                $(this).addClass('selected');
            });
        });

    });

Answer 1

您需要 http://imagesloaded.desandro.com/ 来自同一作者，

祝你好运！ :)

IE 上的同位素排序问题

Isotope sorting issue on IE

javascript

jquery

jquery-isotope