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

   }

%>

瀑布流无限加载infinitescroll插件与masonry插件使用的更多相关文章

  1. jQuery瀑布流+无限加载图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery8种不同的瀑布流懒加载loading效果

    优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果  在线预览 下载地址 实例代码 <ul class="grid effect-1" id="g ...

  3. js实现瀑布流以及加载效果

    一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinteres ...

  4. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  5. 基于jquery响应式网站图片无限加载瀑布流布局

    分享一款效果非常酷的jQuery瀑布流布局无限加载图片效果.整个页面采用响应式布局,图片采用jQuery.Lazyload延时加载技术,提升整个页面的加载速度.效果图如下: 在线预览   源码下载 实 ...

  6. jQuery实现无限加载瀑布流特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  8. jQuery瀑布流无限拖三大利器：masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

  9. JRoll 2 使用文档（史上最强大的下拉刷新，滚动，无限加载插件）

    概述 说明 JRoll,一款能滚起上万条数据,具有滑动加速.回弹.缩放.滚动条.滑动事件等功能,兼容CommonJS/AMD/CMD模块规范,开源,免费的轻量级html5滚动插件. JRoll第二版是 ...

随机推荐

  1. wpf实现一个windows定时关机的工具

    基本界面 起源 在家睡前喜欢用电脑放情景喜剧看,电脑需要定时关机,一开始直接命令行定时关机,感觉有点小麻烦, 于是最近弄了个有界面的 主要功能 在指定的时间之后执行 关机|休眠|重启 的操作, 支持取 ...

  2. pymysql模块学习

    #Pymysql 用于连接mysql数据库 #连接数据库 data_ip = "192.168.34.128" data_name = "lch" data_p ...

  3. Goland安装与配置

    前言 工欲善其事必先利其器,学习Go语言同样如此,一个强大的集成开发环境(IDE)能够大大提高我们的开发效率,目前市面上比较流行的有下面这几种: GoLand:由 JetBrains 公司开发的一个新 ...

  4. 杭电oj 2072————统计单词数（java）

    problem:统计单词数 思路:利用HashMap的特性——不能反复存储同一个键得数据,所以可以保证map里边儿的元素都是不重复的,存储完毕之后直接输出size就好了 注意事项: 1.利用strin ...

  5. linq和扩展方法

    c#的扩展方法 1.必须是在一个非嵌套.非泛型的静态类中的静态方法 2.至少一个参数,第一个参数附加this,不能有其他修饰符如out.ref 3.第一个参数不能是指针类型 上面例子是自定义的一个扩展 ...

  6. css+div上下左右自适应居中

    主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...

  7. 从原理到方案，一步步讲解web移动端实现自适应等比缩放

    前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增 ...

  8. Web设计精髓（转）

    作者:zhouwenqi  地址:http://www.zhouwenqi.com/blog/board_43.html 这篇文章说实际问题的,所以不多强调,下面是我总结的一些比较突出的细节问题,而且 ...

  9. java_基础_注解

    注解(annotation),不是注释(comment) 注解可以对程序做说明,这一点和注释一样但是,注解还可以被其他程序读取,这是注释所不具备的 内置注解:@Override(表示重写父类方法)—— ...

  10. CentOS 7 1810版本不能使用yum 命令

    使用yum install httpd 命令安装Apache 提示错误 annot find a valid baseurl for repobase7x86_64 解决方法: 进入 ls命令寻找类似 ...