-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (66 loc) · 5.71 KB
/
index.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
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Flexbox - mosaic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox.Mosaic.js | <small><span id="columns-count">3</span> columns</small></h1>
<p>In this demo, you can see how <strong>Flexcol.mosaic</strong> library works. For demo purposes, I have set a 5 seconds interval, in which I am changing the number of columns in the container. This way you are able to see how it works with different number of columns.</p>
<div class="flexcol-container">
<div class="flexcol-item">
<img src="http://placehold.it/400x300" alt="">
<p>Minions ipsum me want bananaaa! Para tú hahaha tank yuuu! Ti aamoo! Hana dul sae. Underweaaar bee do bee do bee do aaaaaah hahaha me want bananaaa! Chasy daa daa chasy uuuhhh chasy. Butt me want bananaaa! Bananaaaa la bodaaa tulaliloo uuuhhh poulet tikka masala chasy. Potatoooo tulaliloo jeje bee do bee do bee do po kass butt hana dul sae hahaha. Bappleees poulet tikka masala hahaha poopayee bappleees tulaliloo hana dul sae poopayee. Tatata bala tu wiiiii aaaaaah para tú. Wiiiii pepete me want bananaaa! Baboiii tank yuuu! Uuuhhh gelatooo poulet tikka masala butt hana dul sae. Bappleees pepete poopayee hahaha jiji tank yuuu! </p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x130" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x270" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x250" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x180" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x300" alt="">
<p>Minions ipsum hahaha ti aamoo! Me want bananaaa! La bodaaa para tú pepete pepete potatoooo butt uuuhhh para tú poulet tikka masala potatoooo. Chasy bee do bee do bee do pepete ti aamoo! Para tú pepete para tú tank yuuu! Chasy jeje gelatooo daa ti aamoo! Bappleees la bodaaa tulaliloo poopayee tank yuuu! Hahaha. Jeje me want bananaaa! Aaaaaah butt chasy potatoooo bananaaaa. </p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x150" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x290" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x350" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x430" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x460" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
<div class="flexcol-item">
<img src="http://placehold.it/400x256" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laboriosam numquam optio tenetur delectus animi incidunt aperiam, tempora non totam rerum iste officia doloremque asperiores praesentium suscipit reprehenderit, repellendus, libero.</p>
</div>
</div>
<script src="flexcol.mosaic.js"></script>
<script src="flexcol.mosaic.demo.js"></script>
</body>
</html>