1745801674026.png
1745801706493.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.zhaopian{
width:98%;
margin: 0 auto;
position:relative;
}
.outer{
position:absolute;
width:210px;
height:auto;
padding:5px;
transition: .5s all;
}
.inner{
border:solid 1px #333;
border-radius:8px;
padding:5px;
}
img{
width:188px;
height:auto;
border-radius:5px;
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="zhaopian">
<div class="outer">
<div class="inner"><img src="./images/img (1).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (2).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (3).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (4).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (5).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (6).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (7).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (8).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (9).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (10).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (11).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (12).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (13).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (14).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (15).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (16).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (17).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (18).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (19).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (20).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (21).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (22).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (23).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (24).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (25).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (26).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (27).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (28).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (29).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (30).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (31).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (32).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (33).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (34).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (35).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (36).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (37).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (38).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (39).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (40).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (41).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (42).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (43).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (44).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (45).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (46).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (47).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (48).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (49).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (50).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (51).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (52).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (53).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (54).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (55).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (56).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (57).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (58).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (59).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (60).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (61).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (62).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (63).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (64).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (65).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (66).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (67).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (68).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (69).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (70).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (71).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (72).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (73).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (74).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (75).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (76).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (77).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (78).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (79).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (80).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (81).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (82).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (83).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (84).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (85).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (86).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (87).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (88).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (89).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (90).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (91).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (92).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (93).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (94).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (95).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (96).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (97).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (98).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (99).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (100).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (101).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (102).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (103).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (104).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (105).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (106).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (107).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (108).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (109).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (110).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (111).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (112).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (113).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (114).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (115).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (116).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (117).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (118).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (119).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (120).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (121).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (122).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (123).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (124).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (125).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (126).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (127).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (128).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (129).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (130).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (131).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (132).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (133).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (134).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (135).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (136).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (137).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (138).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (139).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (140).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (141).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (142).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (143).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (144).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (145).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (146).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (147).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (148).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (149).jpg" alt=""></div>
</div>
<div class="outer">
<div class="inner"><img src="./images/img (150).jpg" alt=""></div>
</div>
</div>
<script>
function loadImgs() {
let zhaopian = document.querySelector(".zhaopian")
let c_width = zhaopian.offsetWidth
let cols = Math.floor(c_width / 210)
let imgs = document.querySelectorAll(".outer")
let arr = []
for(let i = 0; i < imgs.length; i++) {
if(i < cols) {
imgs[i].style.top = 0
imgs[i].style.left = i * 210 + "px"
arr.push(imgs[i].offsetHeight)
} else {
let minHeight = Math.min(...arr)
let minIndex = arr.indexOf(minHeight)
imgs[i].style.top = minHeight + "px"
imgs[i].style.left = minIndex * 210 + "px"
arr[minIndex] = minHeight + imgs[i].offsetHeight
}
}
}
window.onload = function() {
loadImgs()
}
window.onresize = function() {
loadImgs()
}
</script>
</body>
</html>
