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

最新推荐文章于 2022-02-17 10:04:10 发布

weixin_30376323

最新推荐文章于 2022-02-17 10:04:10 发布

阅读量126

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/dengnan/p/3994509.html

版权

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>");
   }
%>

转载于:https://www.cnblogs.com/dengnan/p/3994509.html

weixin_30376323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流无限加载infinitescroll插件与masonry插件使用

masonry官网地址http://masonry.desandro.com/，infinitescroll官网地址http://www.infinite-scroll.com/无限滚动原理：无限滚动的实现原理就是当你在网页上的滚动条滚动到离网页底部一定长度的时候，触发某ajax函数（infinite-scroll内已经封装好）,往后台加载文件或者数据，又或者从外部引入静态html形...
复制链接

扫一扫