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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
<!DOCTYPE html>
<head>
<title>Justified Layout Demo</title>
<script type="text/javascript" src="dist/justified-layout.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var justifiedLayout = require('justified-layout');
var demos = [
{
sizes: [0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1],
className: "various",
config: {}
},
{
sizes: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
className: "squares",
config: {}
},
{
sizes: [1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1.5, 1.73, 1.1, 0.5, 1],
className: "breakout",
config: {
"fullWidthBreakoutRowCadence": 3
}
}
];
// Loop through the demos and put them in the page
demos.forEach(function (demo) {
var section = document.createElement("section");
section.innerHTML = `
<h2>Input: <code>[${demo.sizes.join(", ")}]</code></h2>
<div class="justified"></div>
`;
document.body.appendChild(section);
var geometry = justifiedLayout(demo.sizes, demo.config);
console.log("geometry", geometry);
var boxes = geometry.boxes.map(function (box) {
return `<div class="box" style="width: ${box.width}px; height: ${box.height}px; top: ${box.top}px; left: ${box.left}px"></div>`;
}).join('\n')
section.querySelector('.justified').innerHTML = boxes;
section.querySelector('.justified').style.height = geometry.containerHeight + "px";
});
}, false);
</script>
<style type="text/css" media="screen">
.justified {
position: relative;
background: seagreen;
width: 1060px;
}
.box {
position: absolute;
background: yellowgreen;
}
</style>
</head>
<body>
<h1>justified-layout demo</h1>
</body>
|
