-
Notifications
You must be signed in to change notification settings - Fork 4
/
advanced.html
64 lines (60 loc) · 3.31 KB
/
advanced.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Advanced Wrecker Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="advanced.css"/>
<script type="text/javascript" src="libs/jquery-1.9.0.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/jquery-extra-selectors.js"></script>
<script type="text/javascript" src="libs/html5shiv.js"></script>
<script type="text/javascript" src="libs/selectivizr-min.js"></script>
<![endif]-->
<script type="text/javascript" src="jquery.wrecker.min.js"></script>
<script type="text/javascript">
$(function(){
$("#container").wrecker({
// options
itemSelector : ".item",
maxColumns : 4,
responsiveColumns : [
// windowMaxWidth : columns
// windowMaxWidth order and values should match those in your responsive CSS
{1024 : 3},
{800 : 2},
{640 : 1}
]
});
});
</script>
</head>
<body>
<div class="max-width">
<h1>Advanced Wrecker Demo</h1>
<p>Resize the width of this window. You will notice that the <code>display:table</code> layout is responsive from 4 columns down to 1, and wraps like a <code>float</code> layout.</p>
<p><a href="https://github.com/aFarkas/html5shiv/">HTML5Shiv</a>, <a href="http://selectivizr.com/">Selectivizr</a> and <a href="https://github.com/keithclark/JQuery-Extended-Selectors/">jQuery Extra Selectors</a> allow this example to work in earlier versions of Internet Explorer.</p>
<div id="container">
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
<div class="item">
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit. Aenean fermentum, eros quis imperdiet mollis, metus ante volutpat leo, vitae gravida ante leo rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ullamcorper ultrices elementum.</p>
</div>
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
<div class="item">
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit.</p>
</div>
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
<div class="item">
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit. Aenean fermentum, eros quis imperdiet mollis, metus ante volutpat leo, vitae gravida ante leo rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ullamcorper ultrices elementum.</p>
</div>
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
<div class="item">
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit.</p>
</div>
</div>
</div>
</body>
</html>