标签：jquery javascript jquery-isotope

我在IE上遇到同位素分类问题.除了排序之外,一切都很完美,它们都在一条水平线上,请参阅下面的附件.

http://prntscr.com/7oadmb

所以这里是我的代码,其中初始化同位素,几个过滤的东西,项目的动画,以及添加不透明度和类到项目.

(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');
            });
        });

    });

解决方法:

你需要来自同一作者的http://imagesloaded.desandro.com/,

祝好运！

标签：jquery,javascript,jquery-isotope
来源： https://codeday.me/bug/20190609/1203975.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。