Javascript 同位素.js显示加载后标在列中的项目

晚上好,， 我用同位素.js构建的布局有问题。我将脚本添加到我的网站上，对公司做的一些工作的一部分进行排序。到现在为止，一直都还不错。我做了一点定制，我能够让它工作，但当它在动画开始加载时，它会显示我的项目堆叠在一堆中，时间只有几分之一秒

这是我的密码：

链接：

HTML:

正如您所注意到的，在加载之后的短短几秒钟内，我的div将堆叠在一列中，并且仅在它们显示在一行中之后

有没有想过我做错了什么？

«当资源及其相关资源完成加载时，会触发加载事件。»

因此，只需替换

$（窗口）。通过
$（文档）加载（function（）{
）。就绪（function（）{

）和同位素将被实例化，即使图像尚未完成加载

编辑

真正的问题是，同位素是在所有图像加载后实例化的

因此，一个简单的方法是将容器的

不透明度设置为0…

加载所有图像并实例化同位素后，将
不透明度设置为1

在CSS中：

.portfolioContainer{
    opacity:0;
}

在JS中，
$container.isotophe（{
）的关闭背景之后：

«当资源及其从属资源完成加载时，将触发加载事件。»

因此，只需替换
$（窗口）。通过
$（文档）加载（function（）{
）。就绪（function（）{
）和同位素将被实例化，即使图像尚未完成加载



编辑

真正的问题是，同位素是在所有图像加载后实例化的

因此，一个简单的方法是将容器的
不透明度设置为0…

加载所有图像并实例化同位素后，将
不透明度设置为1

在CSS中：

.portfolioContainer{
    opacity:0;
}

在JS中，
$container.isotophe（{
）的关闭背景之后：

document.ready函数在本例中不起作用。我的代码最初是以这种方式设置的，但使用此方法时，div相互重叠。document.ready函数在本例中不起作用。我的代码最初是以这种方式设置的，但使用此方法时，div相互重叠。
.portfolioContainer{
    opacity:0;
}

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