0

我正在使用 Isotope JS 排序和排列图像，除了页面加载时脚本在加载所有图像之前不会运行，它工作正常。在 Isotope JS 帮助页面上，它声明提供高和宽值将为脚本提供在不加载图像的情况下排列项目所需的信息。我这样做了，但脚本仍然只在所有图像加载后才被触发。我是 JS 编码的新手，所以我试图找到我错过的东西。

<script src="js/jquery.isotope.min.js"></script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

        $('.filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });

$(window).load(function(){ $('#container').isotope({ itemSelector : '.item' }); }); var $container = $('#container'); $('.filters a').click(function(){ var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); $('#options').find('.option-set a').click(function(){ var $this = $(this); // 如果已经选择则不要继续 if ( !$this.hasClass ('selected') ) { $this.parents('.option-set').find('.selected').removeClass('selected'); $this.addClass('selected' ); } }); 
<script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

        $('.filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });

4

2 回答 2

1

提供内联高度和宽度是必需的，但您的代码也仅在 imagesLoaded 插件触发 load() 事件时运行。

您需要做的是将代码更改为由jQuery 的 ready() 函数触发，如下所示：

$(document).ready(handler)

代替

$(window).load(handler)

您可以在此处查看有关 Isotope 中包含的 imagesLoaded 插件的更多信息。

于 2012-03-20T11:35:43.430 回答
0

插件创建者自己在此处写道“这是因为 Isotope 在布置所有项目之前需要知道项目的确切宽度”这里需要帮助反转功能；恢复 div 的动画扩展也许您使用的图像太大或太多或两者兼而有之？当错误地链接到具有原始大小图像而不是其网站等价物的文件夹时，遇到了同样的问题。

于 2011-09-10T20:24:19.173 回答