Find file
Fetching contributors…
Cannot retrieve contributors at this time
108 lines (107 sloc) 3.64 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>chembo's JQuery waterfall plugin---demo.</title>
<style>
body {
width:80%;
margin:0 auto;
background:none repeat scroll 0 0 #F2F0F0;
}
#photo_wall{
width:100%;
margin:0 auto;
position:relative;
}
.ablock {display:none;position:absolute;height:auto;background:#fff;text-align:center;}
.ablock:hover {border-radius: 5px 5px 5px 5px;
box-shadow: -11px 20px 48px rgba(0, 0, 0, 0.5);}
#nomore {display:none;text-align:center;}
#loading {
background: url("indicator_medium.gif") no-repeat scroll 50% 0 transparent;
height: 32px;
margin: 20px 0;
text-align: center;
width: 100%;
display:none;
}
a:link { text-decoration: none; color: #333333;}
</style>
</head>
<body>
<div id="container">
<div id="photo_wall">
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/18.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/2.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/4.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/3.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/5.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/6.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/11.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/12.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/13.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/14.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/15.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/16.jpg" />
<p>some description.</p></a>
</div>
<div class='ablock'><a target="_blank" href="#">
<img class="pic" src="test/17.jpg" />
<p>some description.</p></a>
</div>
</div>
</div>
<div id="loading"></div>
<div id="nomore"><h1>no more pics. <a href="http://paradise4ever.com/qt/detail.html#photo_wall">Another Demo.</a></h1></div>
</body>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cb.waterfall.plugin.min.js"></script>
<script type="text/javascript">
$(function(){
$("#photo_wall").waterfall({
ajaxUrl :"ajaxData.txt", ////ajax url. e.g. /server/loadMorePics.php. return json data as {["src":"2.jpg","desc":"description","link":"#"],["src":"4.jpg","desc":"description","link":"#"]}
ajaxParams :{"count":20,"userId":30}, //ajax params. e.g. {"name":"chembo","loadPic":"10"}
ajaxCount :5, //the total times of the ajax will run when scroll hits the bottom. default to 4.
block_class :"ablock", //one block's width. default to ablock.
margin :3, //the margin between two blocks. unit is the px. default to 3.
block_width :230, //one block's width.
animate_duration:500 //jquery animate duration. unit is the million-second. default to 1000.
});
});
</script>
</html>