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. git本地仓库远程仓库地址更改

    git remote rm origingit remote add origin git@52.82.8.87:iot3.0-service/test.gitgit push -u origin - ...

  2. 右键添加IDEA打开

    在安装IntelliJ IDEA时可能没有选择文件用idea打开的选项,现在有这个需求. 下面就演示一下,如何添加文件右键用idea打开! 1. 打开注册表 win+R键输入regedit 2. 找到 ...

  3. Linux C++ 直接选择排序,冒泡排序，快速排序

    选择排序的思想是:每次从待排序中选择最小(大)的元素插入已经排好的序列中. /*直接选择排序*/ #include <iostream> using namespace std; void ...

  4. Homebrew安装Mysql后的两步必要的命令

    linxmousedeiMac:~ linxmouse$ mysql.server start Starting MySQL .. SUCCESS! linxmousedeiMac:~ linxmou ...

  5. C# Timer 控件的用法

    一.主要的属性 在 Windows 窗体应用程序中,定时器控件(Timer)与其他的控件略有不同,它并不直接显示在窗体上,而是与其他控件连用. Enabled 属性: 用于设置该Timer控件是否可用 ...

  6. mybatis（四）：执行流程

    实现流程 // 读取mybatis-config.xml文件 InputStream inputStream = Resources.getResourceAsStream("mybatis ...

  7. 2019牛客训练赛第七场 C Governing sand 权值线段树+贪心

    Governing sand 题意 森林里有m种树木,每种树木有一定高度,并且砍掉他要消耗一定的代价,问消耗最少多少代价可以使得森林中最高的树木大于所有树的一半 分析 复杂度分析:n 1e5种树木,并 ...

  8. Chrome浏览器所有页面崩溃

    问题描述 Chrome浏览器所有页面崩溃,包括设置页面,"喔唷,崩溃啦!" 显示错误码:STATUS_INVALID_IMAGE_HASH Chrome所有插件报错,右下角一串弹框 ...

  9. codeforces 1282 E. The Cake Is a Lie （dfs+构造）

    链接:https://codeforces.com/contest/1282/problem/E 题意:给的是一张平面图,是一个n边形,每次可以切一刀,切出一个三角形,最终切成n-2个三角形.题目给出 ...

  10. Spring事物白话文

    脏读:一个事物读到了另外一个事物中尚未提交的数据: 幻读:A事物读到了B事物新增的数据:白话一点就是读到了别人insert的语句: 不可重复读:A事物读取了B事物更改的数据:白话一点就是我两次sele ...