zoukankan html css js c++ java

瀑布流无限加载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>");
   }
%>

查看全文

相关阅读:
javaScript
alsa驱动分析(1)
Android 音频系统[相当好zz]
verilog语法学习心得[zz]
Linux ALSA声卡驱动之二：声卡的创建[zz]
关于手机线控耳机那点事儿！！[zz]
armlinux备忘
 聊聊Android的音频架构[zz]
片上系统(SOC)设计流程及其集成开发环境[zz]
记录中心设置

原文地址：https://www.cnblogs.com/dengnan/p/3994509.html