【问题标题】:Isotope sorting issue on IEIE 上的同位素排序问题
【发布时间】:2015-07-15 08:12:16
【问题描述】:

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

    });

【问题讨论】:

  • 哪个版本的IE?并添加你的 CSS。最好在fiddle 演示中
  • 所有这些,但是这个问题只在第一次加载时出现,当你点击过滤链接时一切都很好。这是您可以尝试直播的网站链接joannafoto.gaussx.com
  • 在这种情况下,您需要imagesLoaded 插件,由给您同位素的同一个人编写
  • 是的,现在一切正常。谢谢@giorgio

标签: javascript jquery jquery-isotope


【解决方案1】:

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

祝你好运! :)

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-03-17
    • 1970-01-01
    • 2013-02-20
    • 2013-07-31
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多