我不明白为什么会发生。我可能是因为元素尚未满载，但事实并非如此。怪异的是，当您调整大小时，它可以起作用。我尝试了所有东西，但仍然不正确地加载。
垂直位置的代码在JavaScript.js。
的第18行中html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>gallery-js</title>
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>
<!-- You must invoke the method when the elements have loaded -->
<body>
<div id="container">
<!-- Give the divs the classes that you will use as types to show/hide them (Example: app, web, animal, etc) -->
<div class="class1">
<!-- Picture from https://www.pexels.com/photo/photo-of-pink-and-blue-abstract-painting-2471235/ -->
<!-- IMPORTANT: All pictures must have the same proportion (Example: 16:9, 3:2, etc)-->
<img src="img.jpeg" alt="">
<!-- You can put whatever you want in here (Example: <a></a>, <h3></h3>, etc) -->
</div>
<div class="class2">
<img src="img.jpeg" alt="">
</div>
<div class="class1">
<img src="img.jpeg" alt="">
</div>
<div class="class2">
<img src="img.jpeg" alt="">
</div>
<div class="class1">
<img src="img.jpeg" alt="">
</div>
<div class="class2">
<img src="img.jpeg" alt="">
</div>
<div class="class1">
<img src="img.jpeg" alt="">
</div>
<div class="class2">
<img src="img.jpeg" alt="" onload="Gallery('container', ['all', 'class1', 'class2'], 20, 0, 2/3)">
</div>
</div>
</body>
</html>
CSS：
html,body{
padding: 0;
margin: 0;
width: 100%;
}
/* Make the children position relative to this */
#container{
position: relative;
width: 100%;
}
/* Give the div that contain the images absolute position */
#container div:nth-child(n){
top:0;
position: absolute;
/* Make the padding be part of the actual size of the element */
box-sizing: border-box;
}
img{
/* Avoid automatic image bottom margin */
vertical-align: middle;
width: 100%
}
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";
}
});
}
小提琴是不同的：您在 div元素上有 onload属性，但是该元素没有 onload属性，因此根本不执行其值。您可以将其放在body元素上。
另外，当您制作JSFIDDLE时，请注意，默认情况下它将您的代码包装在回调中，因此您的功能Gallery将不是全局函数。因此，请确保将JSFIDDLE配置更改为"无包裹 - ＆lt; body>"。
通过这些校正，小提琴可以正常工作，从某种意义上说，样式均适用于所有容器孩子。
最好还是完全不使用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)
);
我还将将样式代码放在单独的功能中，您可以在加载和调整大小上调用。这样您就可以避免代码重复。