JavaScript没有'；t在加载时不能正确执行代码，但在"；调整“大小”；

我不明白为什么会这样。我想可能是因为元素没有完全加载，但事实并非如此。更奇怪的是，当你调整它的大小时，它就工作了。我什么都试过了，但还是装错了

垂直位置的代码在javascript.js的第18行

HTML:

JavaScript:

"use strict";

function Gallery(container, classes, padding, max, height){
    let elements = document.getElementById(container).children;
    for(var i=0; i<elements.length; i++){
            //Styling of the children of container
            let total_width = Math.round(document.getElementById(container).offsetWidth/500);
            if(total_width>3 && max!=0){
                total_width = max;
            }
            else if(total_width == 0){
                total_width = 1;
            }
            elements[i].style.padding = ""+padding+"px";
            elements[i].style.width = ""+100/total_width+"%";
            elements[i].style.left = ""+((i%total_width)*(100/total_width))+"%";
            elements[i].style.top = ""+(Math.floor(i/total_width)*( ( ( ( document.getElementById(container).offsetWidth - ( 40 * total_width ) ) / total_width ) * height ) + 40 ) ) + "px";
    }
    window.addEventListener("resize", function(){
        for(var i=0; i<elements.length; i++){
            //Styling of the children of container
            let total_width = Math.round(document.getElementById(container).offsetWidth/500);
            if(total_width>3 && max!=0){
                total_width = max;
            }
            else if(total_width == 0){
                total_width = 1;
            }
            elements[i].style.padding = ""+padding+"px";
            elements[i].style.width = ""+100/total_width+"%";
            elements[i].style.left = ""+((i%total_width)*(100/total_width))+"%";
            elements[i].style.top = ""+(Math.floor(i/total_width)*( ( ( ( document.getElementById(container).offsetWidth - ( 40 * total_width ) ) / total_width ) * height ) + 40 ) ) + "px";
        }
    });
}

“严格使用”；
函数库（容器、类、填充、最大值、高度）{
让elements=document.getElementById（container.children）；
对于（变量i=0；变量i3&&max！=0）{
总宽度=最大值；
}
else if（总宽度==0）{
总宽度=1；
}
元素[i].style.padding=“”+padding+“px”；
元素[i]。style.width=”“+100/总宽度+“%”；
元素[i].style.left=“”+（（i%总宽度）*（100/总宽度））+“%”；
元素[i].style.top=”“+（数学地板（i/总宽度）*（（（document.getElementById（container.offsetWidth-（40*总宽度））/总宽度）*高度）+40）+“px”；
}
addEventListener（“调整大小”，函数（）{
对于（变量i=0；变量i3&&max！=0）{
总宽度=最大值；
}
else if（总宽度==0）{
总宽度=1；
}
元素[i].style.padding=“”+padding+“px”；
元素[i]。style.width=”“+100/总宽度+“%”；
元素[i].style.left=“”+（（i%总宽度）*（100/总宽度））+“%”；
元素[i].style.top=”“+（数学地板（i/总宽度）*（（（document.getElementById（container.offsetWidth-（40*总宽度））/总宽度）*高度）+40）+“px”；
}
});
}

小提琴不同：在

div

元素上有

onload

属性，但是这样的元素没有

onload

属性，所以它的值根本不执行。您可以将其放在

主体

元素上

另外，在创建JSFIDLE时，请注意，默认情况下，它会将代码包装在回调中，因此您的函数

Gallery

将不是全局函数。因此，请确保将JSFIDLE配置更改为“No wrap-bottom of”

通过这些更正，可以很好地工作，因为样式应用于所有容器子级

更好的做法是根本不使用

onload

属性，而是使用JS代码，如：

document.addEventListener('DOMContentLoaded', () =>
    Gallery('container', ['all', 'class1', 'class2'], 20, 0, 2/3)
);

或者，如果必须在执行代码之前加载图像：

window.addEventListener('load', () =>
    Gallery('container', ['all', 'class1', 'class2'], 20, 0, 2/3)
);

---

我还将把样式代码放在一个单独的函数中，在加载和调整大小时调用该函数。这样可以避免代码重复。

您可以发布一个fiddle吗？请在此处提供代码，而不是指向存储库的链接。它在fiddle上不起作用，dkw。事实上，我不知道有什么不符合预期。当你说“Js没有正确执行代码”时，你能更具体一点吗？顺便说一句，很好。onLoad事件似乎已被阻止。加载时，位置如下：。我必须调整它的大小以移动到正确的位置，即使加载和调整大小的代码是相同的。第一个问题已更正--需要传递参数。您提到的第二个问题（垂直位置）似乎与问题无关，因为它在调整大小事件中是相同的。我无法重现。您的代码中一定有不同的内容。可能是你加载的一些库。但是，我建议您进行调试，并查看是否调用了您的函数（使用开发工具、控制台等）。如果它在小提琴中工作，那么在复制它时应该工作。否则，这意味着你没有与小提琴相同的东西，因为小提琴也在你的浏览器中运行，无论是哪个浏览器。如果你能以某种方式链接到不起作用的网站，我也许能找出区别。你运行的是哪个版本的Safari？请注意，您需要Safari 10+才能使用大部分EcmaScript 2015语法。

document.addEventListener('DOMContentLoaded', () =>
    Gallery('container', ['all', 'class1', 'class2'], 20, 0, 2/3)
);

window.addEventListener('load', () =>
    Gallery('container', ['all', 'class1', 'class2'], 20, 0, 2/3)
);