西安网站建设ASP+ACCESS实现无限加载瀑布流

23642012-11-16

西安网站建设ASP+ACCESS实现无限加载瀑布流

简单的分享一下,下面有附件下载,西安网站建设团队点墨网络竭诚为您服务。

第一页:

 <ul id="container">
<%
sql_where=keyword_sousuo("classid",classid)
   set rs=server.CreateObject("adodb.recordset")
   rs.open "select * from table order by updatetime desc",conn,1,1
   if not rs.eof then
   PageSize=16 '设置页数,这里会在下一页有关联,数字不统一会造成信息重复展示
  rs.PageSize=PageSize
  recordcount=rs.recordcount
  pagecount=rs.pagecount
  '获得当前页码
  if request("page") = "" then
   page = 1
  else
  page = cint(request("page"))
  if page > pagecount then page=pagecount
  end if
  rs.AbsolutePage=page
  n=1
    for i=1 to rs.PageSize

    %>
<li class="box>读取数据库信息</li><%
    rs.movenext
    if rs.eof then exit for
    next
    %>

   
  <%end if
  rs.close
%></ul>
下面的page-nav中a标签的链接就是通过他实现无限加载的。

<div id="page-nav"><a href="page.asp?page=2">下一页</a></div>

下面是加载在页面底部的JS代码。源文件见最下面附件。

<script type="text/javascript" src="pubu/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="pubu/jquery.masonry.min.js"></script>
<script type="text/javascript" src="pubu/jquery.infinitescroll.min.js"></script>
<script>
$(document).ready(function(){
var $container = $('#container');
 
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 0
});
});
 
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading:{
finishedMsg: 'No more pages to load.',
img: 'pubu/loading.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>

第二页: <ul id="container">
<%
sql_where=keyword_sousuo("classid",classid)
   set rs=server.CreateObject("adodb.recordset")
   rs.open "select * from table order by updatetime desc",conn,1,1
   if not rs.eof then
   PageSize=16
  rs.PageSize=PageSize
  recordcount=rs.recordcount
  pagecount=rs.pagecount
  '获得当前页码
  if request("page") = "" then
   page = 1
  else
  page = cint(request("page"))
  if page > pagecount then page=pagecount
  end if
  rs.AbsolutePage=page
  n=1
    for i=1 to rs.PageSize
if page=pagecount then exit for
    %>
<li class="box">读取的信息</li><%
    rs.movenext
    if rs.eof then exit for
    next
    %>

   
  <%end if
  rs.close
%></ul>
注意这里的JS会少一条,单独打开这个页面的话,会显示JS错误是正常的。
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script>

$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'pubu/loading.gif'
}
},

$(document).ready(function(){
var $container = $('#container');
 
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 0
});
});
 
});
</script>

西安网站建设ASP+ACCESS实现无限加载瀑布流,演示地址:a9u.net ,附件:userfiles/Fl201211161118497911.rar

通过本文您对西安网站建设有了进一步了解,本公司温馨提醒:找西安做网站公司,请选择手续齐全、业务精、服务好的正规公司。

工商网上亮照

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1

客户服务电话:15229292610

公司注册地址:西安市雁塔区融鑫路丽湾蓝岛1幢3单元16层31605号

临时办公地址:西安市雁塔区朱雀大街紫郡长安F3

Sitemap 网站地图 手机版

服务热线:15229292610

客服信箱:vip@dianmo.cc

846461336327

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1