Question

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


        });

$（窗口）.load（函数（）{ $（ '＃集装箱'）。同位素（{ itemSelector：'.item' }）; }）; var $ container = $（'＃container'）; $（'。filters a'）。click（function（）{ var selector = $（this）.attr（'data-filter'）; $ container.isotope（{filter：selector}）; 返回false; }）; $（'＃options'）。find（'。option-set a'）。click（function（）{ var $ this = $（this）; //如果已经选择，请不要继续 if（！$ this.hasClass（'selected'））{ $ this.parents（ '选项设置 '）找到（' 选择 '）removeClass（' 选择'）。; $ this.addClass（ '选择'）; } }）;

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


        });

Answer 1

需要提供内联高度和宽度，但只有在imagesLoaded插件触发load（）事件后，您的代码才会运行。

您需要做的是将代码更改为jQuery's ready() function，如下所示：

$(document).ready(handler)

而不是

$(window).load(handler)

您可以详细了解Isotope here中包含的imagesLoaded插件。

Answer 2

插件创建者自己写道“这是因为同位素需要知道项目的确切宽度才能列出所有项目”这里Need help reversing a function; reverting an animated expansion of a div也许您使用的图像太大或太多或者都？错误地链接到具有原始大小的图像的文件夹而不是他们的网站等价物时有同样的问题。

无法让Isotope JS处理每个图像的高度和宽度值

2 个答案: