forked from jonathanong/horizontal-grid-packing
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
44 lines (38 loc) · 5.44 KB
/
demo.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
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1"><title>Horizontal Grid Packing Example</title><style>html,
body {
margin: 0;
padding: 0;
}
div {
margin: 5px;
}
img {
transition: all 0.3s linear;
}</style><link rel="stylesheet" href="./build/build.css"><script src="./build/build.js"></script></head><body><div class="horizontal-grid-packing"><img src="http://i.imgur.com/DosAhyvl.jpg" data-width='2075' data-height='3000'><img src="http://i.imgur.com/LtHgEMDl.jpg" data-width='1984' data-height='3000'><img src="http://i.imgur.com/ysi9lTFl.jpg" data-width='604' data-height='1000'><img src="http://i.imgur.com/r3FD1jVl.gif" data-width='500' data-height='426'><img src="http://i.imgur.com/k0J2iLIl.png" data-width='1249' data-height='671'><img src="http://i.imgur.com/p7z0kbfl.jpg" data-width='1013' data-height='1500'><img src="http://i.imgur.com/J3B9sAnl.jpg" data-width='726' data-height='1026'><img src="http://i.imgur.com/p9X01gVl.jpg" data-width='800' data-height='1174'><img src="http://i.imgur.com/SHTcRT9l.jpg" data-width='2176' data-height='3920'><img src="http://i.imgur.com/yWYyMEml.jpg" data-width='497' data-height='650'><img src="http://i.imgur.com/CWPbk4ql.jpg" data-width='500' data-height='700'><img src="http://i.imgur.com/rXyHhmvl.gif" data-width='500' data-height='250'><img src="http://i.imgur.com/aPPMYe3l.jpg" data-width='1361' data-height='2048'><img src="http://i.imgur.com/5ZiuVt0l.jpg" data-width='3056' data-height='4464'><img src="http://i.imgur.com/I5uKDEll.jpg" data-width='375' data-height='500'><img src="http://i.imgur.com/O2CXSM7l.jpg" data-width='539' data-height='917'><img src="http://i.imgur.com/sfcJyUZl.jpg" data-width='1280' data-height='1636'><img src="http://i.imgur.com/vKrJ3V6l.jpg" data-width='500' data-height='742'><img src="http://i.imgur.com/NrZDCa9l.jpg" data-width='2165' data-height='3000'><img src="http://i.imgur.com/9GcX4Kfl.jpg" data-width='2592' data-height='3872'><img src="http://i.imgur.com/gMwJibSl.jpg" data-width='476' data-height='635'><img src="http://i.imgur.com/1hfbDYol.jpg" data-width='968' data-height='1319'><img src="http://i.imgur.com/DP2jvCCl.jpg" data-width='1222' data-height='736'><img src="http://i.imgur.com/oCL1OYJl.jpg" data-width='720' data-height='540'><img src="http://i.imgur.com/tMZC7w4l.jpg" data-width='2118' data-height='3000'><img src="http://i.imgur.com/yeJ8O3Rl.jpg" data-width='1620' data-height='2000'><img src="http://i.imgur.com/agmc16Nl.jpg" data-width='634' data-height='537'><img src="http://i.imgur.com/wwEqE0Fl.jpg" data-width='1992' data-height='3000'><img src="http://i.imgur.com/yw4Q2vHl.jpg" data-width='3216' data-height='2412'><img src="http://i.imgur.com/YEMFJPhl.jpg" data-width='640' data-height='573'><img src="http://i.imgur.com/r5LzCzZl.jpg" data-width='2472' data-height='3045'><img src="http://i.imgur.com/uAb63XUl.png" data-width='500' data-height='650'><img src="http://i.imgur.com/AVZarKfl.jpg" data-width='2007' data-height='3000'><img src="http://i.imgur.com/jnzOMNKl.png" data-width='1440' data-height='772'><img src="http://i.imgur.com/gvz5Olql.jpg" data-width='1334' data-height='2000'><img src="http://i.imgur.com/0YT7rUgl.jpg" data-width='1280' data-height='1024'><img src="http://i.imgur.com/fJ8OCVjl.jpg" data-width='640' data-height='640'><img src="http://i.imgur.com/tAQCiLdl.jpg" data-width='1440' data-height='900'><img src="http://i.imgur.com/V48SUo5l.jpg" data-width='1540' data-height='954'><img src="http://i.imgur.com/2Sb0jpBl.jpg" data-width='640' data-height='640'><img src="http://i.imgur.com/ARNomLNl.jpg" data-width='640' data-height='640'><img src="http://i.imgur.com/fgu47Jyl.png" data-width='520' data-height='685'><img src="http://i.imgur.com/vHblQAFl.png" data-width='688' data-height='239'><img src="http://i.imgur.com/9UA8xrVl.jpg" data-width='2000' data-height='1308'><img src="http://i.imgur.com/xynUocEl.jpg" data-width='2520' data-height='3217'><img src="http://i.imgur.com/VdeXvYKl.png" data-width='587' data-height='427'><img src="http://i.imgur.com/xZRnzjgl.jpg" data-width='1434' data-height='2000'><img src="http://i.imgur.com/kDMaVTYl.jpg" data-width='583' data-height='1024'><img src="http://i.imgur.com/1g5H4jdl.jpg" data-width='1436' data-height='1827'><img src="http://i.imgur.com/KrCcmtXl.jpg" data-width='630' data-height='438'><img src="http://i.imgur.com/0wHN7HUl.png" data-width='666' data-height='869'><img src="http://i.imgur.com/4dKfSlVl.jpg" data-width='648' data-height='849'><img src="http://i.imgur.com/NAIp0sXl.jpg" data-width='700' data-height='320'><img src="http://i.imgur.com/QYBRp17l.jpg" data-width='350' data-height='500'><img src="http://i.imgur.com/mmZQcWjl.jpg" data-width='936' data-height='1404'><img src="http://i.imgur.com/ocSRSu1l.jpg" data-width='666' data-height='869'></div><script>var Pack = require('horizontal-grid-packing')
var container = document.querySelector('.horizontal-grid-packing')
var imagesHTML = container.innerHTML
var pack = Pack(container, {
height: height(),
padding: 5
})
var raf = require('component-raf')
var pending = false
window.addEventListener('resize', function () {
if (pending) return
pending = true
raf(reload)
})
function reload() {
pack.width = container.clientWidth
pack.height = height()
pack.reload()
pending = false
}
function append() {
var frag = document.createElement('div')
frag.innerHTML = imagesHTML
pack.append(frag.children)
}
function height() {
return Math.max(Math.round(window.outerHeight / Math.PI), 120)
}</script></body></html>