Skip to content

Instantly share code, notes, and snippets.

@zonoise

zonoise/prototype-masonry-demo.html

Created October 22, 2010 05:00
Show Gist options
  • Save zonoise/639962 to your computer and use it in GitHub Desktop.
Save zonoise/639962 to your computer and use it in GitHub Desktop.
Download ZIP
prototype-masonry-demo.html
Raw
prototype-masonry-demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; http-equiv="content-type">
<link href="sprototype-masonry-demo.css" type="text/css" rel="stylesheet">
<script src="http://prototypejs.org/assets/2009/8/31/prototype.js"></script>
<script src="prototype.masonry-0.2.js"></script>
<title>title</title>
<style type="text/css"></style>
<script type="text/javascript">
window.onload=function(){
new Masonry($('tweets'),{columnWidth: 200, itemSelector: '.tweet'});
}
</script>
</head>
<body>
<div id="header">
<p>header</p>
</div>
<div id="container">
<div id="tweets">
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">CSSレイアウトテストなう。
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、。
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、つれづれなるまゝに、日暮らし、
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。（Wikipediaより）つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あ
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはか
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはか
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">
</p>
</div>
<div class="tweet">
<img class="avator" src="http://a3.twimg.com/profile_images/1126767327/twitter_normal.jpg" width="48" height="48" border="0" alt="">
<p class="screen-name">SCREEN NAME</p>
<p class="tweet-text">CSSレイアウトテストなう。
</p>
</div>
</div><!--tweets -->
</div><!--container -->
<div id ="footer">
<p>footer</p>
</div><!--footer-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment