Question

晚上好，我使用isotope.js构建的布局出了问题。我将脚本添加到我的网站，以对我公司所做的一些工作进行排序。到现在为止还挺好。我做了一些自定义，并且我能够使它工作，但是当它在动画的最开始加载时，它显示我的项目堆叠在一堆，只有几分之一秒。

这是我的代码：

LINK：

http://larchedigital.com/the-work/

HTML：

<div class="portfolioFilter">
    <a href="#" data-filter="*" class="current">All Categories</a>
    <a href="#" data-filter=".web">Web Design &amp; Development</a>
    <a href="#" data-filter=".branding">Branding</a>
    <a href="#" data-filter=".logo">Logo Refresh</a>
    <a href="#" data-filter=".packaging">Packaging Design</a>
    <a href="#" data-filter=".videography">Videography</a>
    <a href="#" data-filter=".photo">Photography</a>
</div>

<div class="portfolioContainer">
    <div class="web packaging logo social-ads branding">
        blablabla
    <div>
    <div class="videography photo">
    </div>
</div>

JAVASCRIPT：

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        },
    layoutMode: 'masonry',
    masonry: { 
        isFitWidth: true 
    }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        return false;
    });
});

正如您所注意到的那样，在加载之后，在几分之一秒内，我的div会堆叠在一列中，并且只有在它们显示成一行之后才会显示。

想到我做错了什么？

Answer 1

«当资源及其相关资源加载完毕后会触发load事件。» Reference

所以只需将$(window).load(function(){替换为$(document).ready(function(){，即使图像尚未完成加载，也会实例化同位素。

的修改

问题实际上是在所有图像都已加载后，Isotope会被实例化。

因此，四处走动就是将容器的opacity设置为0 ...
一旦加载了所有图像并且同位素被实例化，请将opacity设置为1。

在CSS中：

.portfolioContainer{
    opacity:0;
}

在JS中，在$container.isotope({：

的结束语后

$(".portfolioContainer").css({"opacity":1});

Isotope.js显示加载后放在列中的项目

1 个答案: