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. 菜鸟教程 Missing parentheses in call to 'print'

    个人博客 地址:http://www.wenhaofan.com/article/20180618180327 >>> print "hello" SyntaxE ...

  2. Spring框架详解介绍-基本使用方法

    1.Spring框架-控制反转(IOC) 2.Spring框架-面向切面编程(AOP) 3.Spring 内置的JdbcTemplate(Spring-JDBC) Spring框架-控制反转(IOC) ...

  3. Python的特点

    简单易学. 免费开源. 跨平台. 解释性.不需要编译就可以直接运行,使用更加简单,移植性更强. 面向对象.arcgis也支持面向对象编程.

  4. TCP／IP详解，卷1：协议--第8章 Traceroute程序

    引言 由Van Jacobson编写的Tr a c e r o u t e程序是一个能更深入探索T C P / I P协议的方便可用的工具. 尽管不能保证从源端发往目的端的两份连续的 I P数据报具有 ...

  5. Apache NIFI

    Add a.password file to chrome. Settings -> Advanced -> Security -> Manage Certificates -> ...

  6. Java Web代码审计流程与漏洞函数

    常见框架与组合 常见框架 Struts2 SpringMVC Spring Boot 框架执行流程 View层:视图层 Controller层:表现层 Service层:业务层 Dom层:持久层 常见 ...

  7. 安装MySQL5.7.22遇到的坑

    安装MySQL: 第一步:将压缩包解压后,手动新建名为my.ini的文本文档,代码内容如下: #代码开始[mysql]default-character-set=utf8[mysqld]#skip-g ...

  8. LitElement(三)Styles样式

    1.为组件添加样式 import { LitElement, css, html } from 'lit-element'; class MyElement extends LitElement { ...

  9. codeforces 1282C. Petya and Exam （贪心）

    链接:https://codeforces.com/contest/1282/problem/C 题意:  有一个人参加考试,考试只有两种题,一种是简单题,每道题耗时固定为a:另一种是困难题,每道题耗 ...

  10. Element-ui组件库Table表格导出Excel表格

    安装npm install --save xlsx file-saver 两个插件的详细地址在下面 https://github.com/SheetJS/js-xlsxhttps://github.c ...