forked from desandro/masonry
-
Notifications
You must be signed in to change notification settings - Fork 1
/
tumblelog.html
executable file
·242 lines (175 loc) · 16.4 KB
/
tumblelog.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
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery Masonry › Tumblelog Example</title>
<link rel="stylesheet" type="text/css" href="css/masonry_example.css" media="screen" charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
</head>
<body>
<ol id="nav">
<li><strong>jQuery Masonry ›</strong></li>
<li><a href=".">Primer</a></li>
<li><a href="basic.html">Basic Examples</a></li>
<li class="selected"><a href="tumblelog.html">Tumblelog Example</a></li>
<li><a href="infinite_scroll.html">Infinite Scroll Example</a></li>
</ol>
<h1>Tumblelog Example</h1>
<div class="copy">
<p>A tumblelog is a good example of a typical use case for Masonry.</p>
<p>There are three sizes of columns used:</p>
<ul>
<li><code>.col1</code> : 220px</li>
<li><code>.col2</code> : 460px</li>
<li><code>.col3</code> : 700px</li>
</ul>
<p>With 10px of margin on right and left sides that makes for a grid with columns 240px wide.</p>
<pre><code><span class="keyword">$</span>(<span class="storage">function</span>(){
$(<span class="string">'#tumblelog'</span>).masonry({ columnWidth: <span class="constant">240</span> });
});</code></pre>
<p>All videos and images have width and height specified inline.</p>
</div>
<div id="tumblelog">
<div class="story col2">
<h2>Last Day Dream</h2>
<p>
<object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4155700&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=ff4000&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4155700&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=ff4000&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="story col1">
<blockquote>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</blockquote>
<p>— Marcus Aurelius</p>
</div>
<div class="story col1">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="story col2">
<p>
<a href="http://www.flickr.com/photos/george_eastman_house/3123693806/in/set-72157611386593623"><img src="http://farm4.static.flickr.com/3121/3123693806_4cb1ca16d9.jpg" alt="" width="460" height="359" /></a>
</p>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/george_eastman_house/3123692308/in/set-72157611386593623">
<img src="http://farm4.static.flickr.com/3282/3123692308_9e81bc4d14.jpg" alt="" width="220" height="290" />
</a>
</p>
<p>[PARENTS MAGAZINE, GIRL WITH CAT]</p>
</div>
<div class="story col1">
<blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story col2">
<object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6185327&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6185327&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
</div>
<div class="story col2">
<h2>Ut enim ad minim veniam</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="story col3">
<h3>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</h3>
<h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a></h3>
</div>
<div class="story col1">
<h3>feugiat vitae, ultricies eget</h3>
<a href="http://www.flickr.com/photos/library_of_congress/2179137415/"><img src="http://farm3.static.flickr.com/2109/2179137415_0e63ebb36e_m.jpg" width="191" height="240" alt="" /></a>
</div>
<div class="story col2">
<h2>A Tremendous Celebration</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
<div class="story col2">
<h2>And of Deliberate Consequences</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<h3>Aenean ultricies mi</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Vestibulum tortor quam</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="story col1">
<blockquote>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
</p>
</blockquote>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/library_of_congress/2179136893/"><img src="http://farm3.static.flickr.com/2186/2179136893_a12b3ace56_t.jpg" height="81" /></a>
</p>
<p>
Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the "Flying Fortress," the B-17F is a later model of the B-17 which distinguished itself in action in the South Pacific, over Germany and elsewhere. It is a long range, high altitude heavy bomber, with a crew of seven to nine men, and with armament sufficient to defend itself on daylight missions
</p>
</div>
<div class="story col1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/library_of_congress/2178407555/"><img src="http://farm3.static.flickr.com/2008/2178407555_9a9bcfe31f_m.jpg" height="240" alt="" /></a>
</p>
</div>
<div class="story col3">
<object width="700" height="394"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7174318&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7174318&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="394"></embed></object>
</div>
<div class="story col1">
<blockquote>
<p>Sing, O goddess, the anger of Achilles son of Peleus, that brought countless ills upon the Achaeans. Many a brave soul did it send hurrying down to Hades, and many a hero did it yield a prey to dogs and vultures, for so were the counsels of Jove fulfilled from the day on which the son of Atreus, king of men, and great Achilles, first fell out with one another.</p>
</blockquote>
<cite><a href="http://classics.mit.edu/Homer/iliad.1.i.html">Homer — The Iliad</a></cite>
</div>
<div class="story col1">
<h2>Aliens attack South Dakota</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<blockquote><p>Yes, it did happen.</p></blockquote>
<p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="story col3">
<p style="float: right; margin-left: 20px"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><img src="http://farm4.static.flickr.com/3197/3122875223_917b1ccafc.jpg" alt="McCall Cover, Joan Caulfield" width="460" height="380" /></a></p>
<h2>And then, there is this.</h2>
<p class="caption"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><em>McCall Cover, Joan Caulfield</em> by Nickolas Muray</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> <!-- /#tumblelog -->
<p id="footer">
jQuery Masonry by <a href="http://desandro.com/">David DeSandro</a>
</p>
<script type="text/javascript">
$(function(){
$('#tumblelog').masonry({columnWidth: 240})
})
</script>
</body>
</html>