Update show_album.php
Browse files- show_album.php +0 -36
show_album.php
CHANGED
@@ -7,13 +7,11 @@
|
|
7 |
.waterfall {
|
8 |
column-count: 4;
|
9 |
column-gap: 10px;
|
10 |
-
position: relative;
|
11 |
}
|
12 |
.item {
|
13 |
display: inline-block;
|
14 |
margin-bottom: 10px;
|
15 |
break-inside: avoid;
|
16 |
-
position: absolute;
|
17 |
}
|
18 |
.item img {
|
19 |
width: 100%;
|
@@ -64,40 +62,6 @@ if (isset($_GET['album'])) {
|
|
64 |
});
|
65 |
});
|
66 |
|
67 |
-
window.onload = function() {
|
68 |
-
var imgWidth = document.querySelector('.item img').offsetWidth;
|
69 |
-
var column = Math.floor(window.innerWidth / imgWidth);
|
70 |
-
var heightArr = Array(column).fill(0);
|
71 |
-
|
72 |
-
images.forEach(function(image) {
|
73 |
-
var minHeight = Math.min(...heightArr);
|
74 |
-
var minIndex = heightArr.indexOf(minHeight);
|
75 |
-
image.style.top = heightArr[minIndex] + 'px';
|
76 |
-
image.style.left = minIndex * imgWidth + 'px';
|
77 |
-
|
78 |
-
heightArr[minIndex] += image.offsetHeight + 10; // Add margin between items
|
79 |
-
});
|
80 |
-
};
|
81 |
-
|
82 |
-
window.onresize = function() {
|
83 |
-
images.forEach(function(image) {
|
84 |
-
image.style.position = 'static';
|
85 |
-
});
|
86 |
-
|
87 |
-
var imgWidth = document.querySelector('.item img').offsetWidth;
|
88 |
-
var column = Math.floor(window.innerWidth / imgWidth);
|
89 |
-
var heightArr = Array(column).fill(0);
|
90 |
-
|
91 |
-
images.forEach(function(image) {
|
92 |
-
var minHeight = Math.min(...heightArr);
|
93 |
-
var minIndex = heightArr.indexOf(minHeight);
|
94 |
-
image.style.top = heightArr[minIndex] + 'px';
|
95 |
-
image.style.left = minIndex * imgWidth + 'px';
|
96 |
-
|
97 |
-
heightArr[minIndex] += image.offsetHeight + 10; // Add margin between items
|
98 |
-
});
|
99 |
-
};
|
100 |
-
|
101 |
function closeBigImg() {
|
102 |
bigImg.style.display = 'none';
|
103 |
bigImg.innerHTML = '';
|
|
|
7 |
.waterfall {
|
8 |
column-count: 4;
|
9 |
column-gap: 10px;
|
|
|
10 |
}
|
11 |
.item {
|
12 |
display: inline-block;
|
13 |
margin-bottom: 10px;
|
14 |
break-inside: avoid;
|
|
|
15 |
}
|
16 |
.item img {
|
17 |
width: 100%;
|
|
|
62 |
});
|
63 |
});
|
64 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
65 |
function closeBigImg() {
|
66 |
bigImg.style.display = 'none';
|
67 |
bigImg.innerHTML = '';
|