-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmodern_mansory_flexbox_with_JS.html
61 lines (56 loc) · 1.81 KB
/
modern_mansory_flexbox_with_JS.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Modern Mansory Flexbox with JS</title>
<link rel="stylesheet" href="css/modern_mansory_flexbox_with_JS.css">
</head>
<body>
<div class="quantize"></div>
</body>
<script type="text/javascript">
var container = document.getElementsByClassName('quantize')[0];
var butterflies = ['butterfly-on-petal.jpg', 'butterfly-on-yellow-flower.jpg', 'blue-butterfly.jpg', 'albino-butterfly.jpg', 'orange-butterfly.jpg'];
function preloadImage (filename) {
var img = new Image();
img.onload = function () {
img.aspectRatio = img.naturalWidth / img.naturalHeight;
var fig = document.createElement('figure');
fig.appendChild(img);
container.appendChild(fig);
};
img.src = filename;
img.alt = "";
}
function loadImages () {
for (var i = 0; i < butterflies.length; i++) {
var filename = './images/' + butterflies[i];
preloadImage(filename);
}
}
function fitFlex () {
var flexGroup = document.querySelectorAll("figure");
var flexArray = Array.prototype.slice.call(flexGroup, 0);
flexArray.sort(function (a, b) {
imageAspectRatioA = a.firstElementChild.aspectRatio;
imageAspectRatioB = b.firstElementChild.aspectRatio;
if (imageAspectRatioA < imageAspectRatioB) { return 1;}
if (imageAspectRatioA > imageAspectRatioB) { return -1;}
return 0;
});
var widest = flexArray[0].firstElementChild.aspectRatio;
var smallestWidth = '300';
flexArray.forEach(function (box) {
var flex = 1 / (widest / box.firstElementChild.aspectRatio);
if (flex == 0) { flex = 1;}
boxWidth = smallestWidth * flex;
box.style.cssText = "flex: " + flex + "; min-width: " + boxWidth + "px;";
});
}
loadImages();
window.addEventListener("load",function () {
fitFlex();
});
</script>
</html>