<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
<html xmlns="http://www.w3.org/1999/xhtml">?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">?
<title>Insert title here</title>?
<!--樣式-->?
<style type="text/css">?
body {margin:40px auto; width:800px; font-size:12px; color:#666;}?
.item{?
border: 1px solid #D4D4D4;?
color: red;?
margin: 0 10px 10px 0;?
padding: 10px;?
position: relative;?
width: 200px;?
}?
.loading-wrap{?
bottom: 50px;?
width: 100%;?
height: 52px;?
text-align: center;?
display: none;?
}?
.loading {?
padding: 10px 10px 10px 52px;?
height: 32px;?
line-height: 28px;?
color: #FFF;?
font-size: 20px;?
border-radius: 5px;?
background: 10px center rgba(0,0,0,.7);?
}?
.footer{?
border: 2px solid #D4D4D4;?
}?
</style>?
<!--樣式-->?
</head>?
<body>?
<!--引入所需要的jquery和插件-->?
<script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script>?
<script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script>?
<!--引入所需要的jquery和插件-->?
<!--瀑布流-->?
<div id="container" class=" container">?
<!--這里通過設置每個div不同的高度,來凸顯布局的效果-->?
<volist name="height" id="vo">?
<div class="item" style="height:{$vo}px;">瀑布流下來了</div>?
<input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/>?
</volist>?
</div>?
<!--瀑布流-->?
<!--加載中-->?
<div id="loading" class="loading-wrap">?
<span class="loading">加載中,請稍后...</span>?
</div>?
<!--加載中-->?
<!--尾部-->?
<div class="footer"><center>我是頁腳</center></div>?
<!--尾部-->?
<script type="text/javascript">?
//用于轉換unix時間戳?
function unix_to_datetime(unix)??
{?
var now = new Date(parseInt(unix) * 1000);?
return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");?
}?
$(function(){?
//頁面初始化時執行瀑布流?
var $container = $('#container');?
$container.masonry({?
itemSelector : '.item',?
isAnimated: true?
});?
//用戶拖動滾動條,達到底部時ajax加載一次數據?
var loading = $("#loading").data("on", false);//通過給loading這個div增加屬性on,來判斷執行一次ajax哀求?
$(window).scroll(function(){?
if(loading.data("on")) return;?
if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//頁面拖到底部了?
//加載更多數據?
loading.data("on", true).fadeIn(); //在這里將on設為true來阻止繼續的ajax哀求?
?
//獲取最后一個id?
var lastid = $('.last_id:last').val();?
$.get(?
"getMore", //要跳轉的頁面?
{lastid:lastid},//傳值?
function(data){?
//獲取到了數據data,后面用JS將數據新增到頁面上?
var getdata = data.data;?
var html = "";?
if($.isArray(getdata)){?
$.each(data.data,function(i,item) {?
html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下來了</div>";?
});?
var $newElems = $(html).css({ opacity: 0 }).appendTo($container);?
$newElems.imagesLoaded(function(){?
$newElems.animate({ opacity: 1 });?
$container.masonry( 'appended', $newElems, true );??
});?
//一次哀求完成,將on設為false,可以進行下一次的哀求?
loading.data("on", false);?
}?
loading.fadeOut();?
},?
"json"?
);?
}?
});?
});?
</script>?
</body>?
</html>
