blocksit-js瀑布流无限加载。示例

于 2013-04-19 17:01:00 发布
阅读量151 收藏
点赞数
文章标签： javascript java ViewUI
原文链接：https://my.oschina.net/Rayn/blog/123938
版权

<html>
<head>
<title>BlocksIt.js Demonstration #2 - Pinterest Dynamic Grid Layout with CSS3 Transitions</title>
<meta name="description" content="BlocksIt.js jQuery plugin Demonstration #2 Pinterest dynamic grid with CSS3 Transitions by inWebson.com"/>
<meta name="keywords" content="demonstration,demo,jquery,blocksit.js,css3,dynamic,grid,layout,inwebson"/>
<link rel='stylesheet' href='style.css' media='screen' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../blocksit.min.js"></script>
<script>
$(document).ready(function() {
//vendor script
$('#header')
.css({ 'top':-50 })
.delay(1000)
.animate({'top': 0}, 800);

$('#footer')
.css({ 'bottom':-15 })
.delay(1000)
.animate({'bottom': 0}, 800);

//blocksit define
$(window).load( function() {
$('#container').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement:'.grid'
});
});

//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 2
} else if(winWidth < 880) {
conWidth = 660;
col = 3
} else if(winWidth < 1100) {
conWidth = 880;
col = 4;
} else {
conWidth = 1100;
col = 5;
}

if(conWidth != currentWidth) {
currentWidth = conWidth;
$('#container').width(conWidth);
$('#container').BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8,
blockElement:'.grid'
});
}
});

$(window).scroll(function(){
var clientHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
scrollHeight = $(document).height();
if(clientHeight + scrollTop >=  scrollHeight ){
var v = $("<div class='grid'><div class='imgholder'><img src='http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg' /></div><strong>Sunset Lake</strong><p>A peaceful sunset view...</p><div class='meta'>by j osborn</div></div>");
$("#container").append(v).BlocksIt('reload');
}
});
});
</script>
</head>
<body>
<div id="container">
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg" />
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div class="meta">by j osborn</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg" />
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div class="meta">by SigitEko</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg" />
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img23.jpg" />
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg" />
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img22.jpg" />
</div>
<strong>Rooster's Ranch</strong>
<p>Rooster's ranch landscape...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img16.jpg" />
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img21.jpg" />
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img28.jpg" />
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div class="meta">by Ian Flindt</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img2.jpg" />
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img24.jpg" />
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div class="meta">by Robert Strachan</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img19.jpg" />
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img5.jpg" />
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div class="meta">by unknown</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img25.jpg" />
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div class="meta">by R A Stanley</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div> <!---->
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
</div>
</body>
</html>


---------------------------------------------------------分割线---------------------------------------------------


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'test2.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/blocksit.min.js"></script>


<script type="text/javascript">
  $(document).ready(function(){
  alert("this");
 
  //vendor script
$("#header")
.css({ "top":-50 })
.delay(1000)
.animate({"top": 0}, 800);

$("#footer")
.css({ "bottom":-15 })
.delay(1000)
.animate({"bottom": 0}, 800);

//blocksit define
$(window).load( function() {
$('#container').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement : ".grid"
});
});

//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 2;
} else if(winWidth < 880) {
conWidth = 660;
col = 3;
} else if(winWidth < 1100) {
conWidth = 880;
col = 4;
} else {
conWidth = 1100;
col = 5;
}

if(conWidth != currentWidth) {
currentWidth = conWidth;
$("#container").width(conWidth);
$("#container").BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8,
blockElement : ".grid"
});
}
});
  });
</script>
  </head>
  <body>
<div align="center">
</div>


<div id="container">
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img27.jpg" />
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div class="meta">by j osborn</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img26.jpg" />
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div class="meta">by SigitEko</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img15.jpg" />
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img23.jpg" />
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img17.jpg" />
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img22.jpg" />
</div>
<strong>Rooster's Ranch</strong>
<p>Rooster's ranch landscape...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img16.jpg" />
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img21.jpg" />
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img28.jpg" />
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div class="meta">by Ian Flindt</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img2.jpg" />
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img24.jpg" />
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div class="meta">by Robert Strachan</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img19.jpg" />
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img5.jpg" />
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div class="meta">by unknown</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img25.jpg" />
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div class="meta">by R A Stanley</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div> <!---->
</div>

<div>
<jsp:include page="bottom.jsp"></jsp:include>
</div>
  </body>
</html>


转载于:https://my.oschina.net/Rayn/blog/123938

chuhui1765
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值