forked from germanysbestkeptsecret/Wookmark-jQuery
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·138 lines (116 loc) · 5.79 KB
/
index.html
File metadata and controls
executable file
·138 lines (116 loc) · 5.79 KB
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Wookmark Plug-in Example</title>
<meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
<meta name="author" content="Christoph Ono, Sebastian Helzle">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS Reset -->
<link rel="stylesheet" href="../css/reset.css">
<!-- Global CSS for the page and tiles -->
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="container">
<header>
<h1>jQuery Wookmark Plug-in Example</h1>
<p>Scroll down to see the infinite scroll effect.</p>
</header>
<div id="main" role="main">
<ul id="tiles">
<!-- These are our grid blocks -->
<li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
<li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
<li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
<li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
<li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
<li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
<li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
<li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
<li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>9</p></li>
<li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>10</p></li>
<li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>11</p></li>
<li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>12</p></li>
<li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>13</p></li>
<li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>14</p></li>
<li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>15</p></li>
<li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>16</p></li>
<li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>17</p></li>
<li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>18</p></li>
<li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>19</p></li>
<li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>20</p></li>
<li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>21</p></li>
<li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>22</p></li>
<li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>23</p></li>
<li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>24</p></li>
<li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>25</p></li>
<li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>26</p></li>
<li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>27</p></li>
<li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>28</p></li>
<li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>29</p></li>
<li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>30</p></li>
<!-- End of grid blocks -->
</ul>
</div>
<footer>
</footer>
</div>
<!-- include jQuery -->
<script src="../libs/jquery.min.js"></script>
<!-- Include the imagesLoaded plug-in -->
<script src="../libs/jquery.imagesloaded.js"></script>
<!-- Include the plug-in -->
<script src="../jquery.wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
(function ($){
var $tiles = $('#tiles'),
$handler = $('li', $tiles),
$main = $('#main'),
$window = $(window),
$document = $(document),
options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $main, // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
/**
* Reinitializes the wookmark handler after all images have loaded
*/
function applyLayout() {
$tiles.imagesLoaded(function() {
// Destroy the old handler
if ($handler.wookmarkInstance) {
$handler.wookmarkInstance.clear();
}
// Create a new layout handler.
$handler = $('li', $tiles);
$handler.wookmark(options);
});
}
/**
* When scrolled all the way to the bottom, add more tiles
*/
function onScroll() {
// Check if we're within 100 pixels of the bottom edge of the broser window.
var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
if (closeToBottom) {
// Get the first then items from the grid, clone them, and add them to the bottom of the grid
var $items = $('li', $tiles),
$firstTen = $items.slice(0, 10);
$tiles.append($firstTen.clone());
applyLayout();
}
};
// Call the layout function for the first time
applyLayout();
// Capture scroll event.
$window.bind('scroll.wookmark', onScroll);
})(jQuery);
</script>
</body>
</html>