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. XSS详解【1】---基本概念和攻击原理

    这节主要讲述XSS的基本概念和攻击原理. 一 XSS基本概念 人们经常将跨站脚本攻击(Cross Site Scripting)缩写为CSS,但这会与层叠样式表(Cascading Style She ...

  2. Python并发学习

    #Python并发 多任务 多进程 多线程 线程同步 #多任务处理 多任务处理:使得计算机可以同时处理多个任务 听歌的同时QQ聊天.办公.下载文件 实现方式:多进程.多线程 #程序和进程 程序:是一个 ...

  3. Execl导入系统

    文件导入功能 前台代码: Content\JS\jquery.ajaxfileupload.js<script src="~/Content/JS/jquery.ajaxfileupl ...

  4. 记录 shell学习过程（3） if 的格式

    ] #-e 为检测目录或文件是否存在 !为取反 then mkdir -v /tmp/ echo 'ok' fi if else if [ $USER == 'root' ] then echo 'h ...

  5. django 外键使用select html

    1.HTML代码: <td> <select id="depend_case" name="depend_case"> <opti ...

  6. [CCPC2019 哈尔滨] A. Artful Paintings - 差分约束,最短路

    Description 给 \(N\) 个格子区间涂色,有两类限制条件 区间 \([L,R]\) 内至少 \(K\) 个 区间 \([L,R]\) 外至少 \(K\) 个 求最少要涂多少个格子 Sol ...

  7. MyBatis 动态代理开发

    MyBatis 动态代理开发 §  Mapper.xml文件中的namespace与mapper接口的类路径相同. §  Mapper接口方法名和Mapper.xml中定义的每个statement的i ...

  8. sftp，ftp文件下载

    一.sftp工具类 package com.ztesoft.iotcmp.util; import com.jcraft.jsch.ChannelSftp; import com.jcraft.jsc ...

  9. 执行yum相关命令总是卡住，ctrl+c也退出不了

    问题描述 在用yum.rpm命令安装或查询任何包时,执行相关命令后无任何反应,直接卡住,也未给出任何错误提示信息,ctrl+c也不好使,只能杀掉进程. 原因 出现此问题是因为rpm的数据库出现异常了, ...

  10. php 基础系列之 php快速入门

    ·插补操作 将简单变量写入一个由双引号引用的字符串中,就叫插补操作.例如: $test = 'xx'; echo "你好:$test"; 注意:插补操作只是双引号引用字符串的特性. ...