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. MySQL 8.0.18 在 Windows Server 2019 上的安装（ZIP）公开

    AskScuti MySQL : Windows Server 2019 安装 MySQL 8.0 温馨提示:为了展现我最“魅力”的一面,请用谷歌浏览器撩我. 一切就绪,点我开撩

  2. Codeforces1295D. Same GCDs （欧拉函数）

    https://codeforces.com/contest/1295/problem/D 设gcd(a,m)= n,那么找gcd(a +x ,m)= n个数,其实就等于找gcd((a+x)/n,m/ ...

  3. [HDU4609] 3-idiots - 多项式乘法,FFT

    题意:有\(n\)个正整数,求随机选取一个3组合,能构成三角形的概率. Solution: 很容易想到构造权值序列,对其卷积得到任取两条边(可重复)总长度为某数时的方案数序列,我们希望将它转化为两条边 ...

  4. linux - 数据库 - Connected to an idle instance

    运行 connect /as sysdba; 报错:Connected to an idle instance 原因:配置文件 .bash_profile 中的 ORACLE_HOME 的最后这个 / ...

  5. js-时间相关的转换

    毫秒值 -> 时间 var date = new Date(1477386005*1000);

  6. HTTP响应头 状态码

    HTTP 简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传 ...

  7. codeforces 1284C. New Year and Permutation（组合数学）

    链接:https://codeforces.com/problemset/problem/1284/C 题意:定义一个framed segment,在区间[l,r]中,max值-min值 = r - ...

  8. 托管代码中调用c++本地代码

    c++本地动态连接库代码 #pragma once #include "stdafx.h" #ifdef PERSON_EXPORTS #define PERSON_API __d ...

  9. oracle使用resultMap实现高级结果映射

    resultMap的属性: 1.属性 id:resultMap的唯一标识.type:resulMap的映射结果类型(一般为Java实体类).2.子节点 id:一般对应数据库的主键 id,设置此项可以提 ...

  10. Go_sqlx和占位符

    sqlx使用 第三方库sqlx能够简化操作,提高开发效率. 安装 go get github.com/jmoiron/sqlx package main import ( "fmt" ...