瀑布流无限加载infinitescroll插件与masonry插件使用

masonry官网地址http://masonry.desandro.com/，infinitescroll官网地址http://www.infinite-scroll.com/

无限滚动原理：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形式文件。

 

一个简单的实例

html页面代码如下

<!DOCTYPE HTML>
<html>
  <head>
    <title>无限瀑布流</title>
    <style type="text/css">
      .container{padding:20px;}
      .box{margin-bottom:20px;float:left;width:220px;}
      .box .image_box{width:100%;height:300px;background:#FCF;}
      #infscr-loading{text-align:center;padding:10px;background:#000;opacity:0.8;filter:alpha(opacity=80);color:#FFF;}
      #infscr-loading{position:fixed;bottom:0px;left:45%;z-index:9999;width:200px;}
    </style>
    <script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/masonry/2.1.08/jquery.masonry.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript">
    $(function(){
    var $container = $('#masonry');
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth : 20,
            isAnimated: true,
        });
    });
    $container.infinitescroll({
        navSelector  : '#page-nav',
        nextSelector : '#page-nav a',
        itemSelector : '.box',
        loading: {
            finishedMsg: '没有更多的页面加载。',
            loadingText:'加载中',
            img: 'images/loading.gif'
        }
    },function(newElements){
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({opacity:1});
                $container.masonry( 'appended', $newElems, true ); 
            });
        }
    );
    })
    </script>
  </head>
  <body>
  <div id="masonry" class="container">
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a<br>b</div></div>
  <div class="box"><div class="image_box">a<br>c</div></div>
  <div class="box"><div class="image_box">a<br>d<br>f</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a<br>d<br>c<br>ad</div></div>
  <div class="box"><div class="image_box">a</div></div>
  <div class="box"><div class="image_box">a</div></div>
</div>
<div id="page-nav"><a href="data.jsp?page=1"></a></div>
  </body>
</html>

data.jsp服务接口返回数据

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
   String page1 = request.getParameter("page");
   if("4".equals(page1)){
       out.print("");
   }else{
   out.print("<div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div><div class='box'><div class='image_box'>a</div></div>");
   }
%>

 

posted @ 2014-09-26 11:28  纠结的NAME  阅读(2926)  评论(0)  编辑  收藏  举报