下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。

后台用 json 传输数据, 示例程序中只写了示例数组。数据也只设置了两个属性, 需根据实际应用改写。
 
页面用了 ul li 做为容器, 每个 li 表示一列
 
<ul id="stage">  
    <li></li>  
    <li></li>  
    <li></li>  
    <li></li>  
</ul>  
 
 
JS代码
 
/* 
@版本日期: 版本日期: 2012年4月11日 
@著作权所有: 1024 intelligence ( http://www.1024i.com ) 
 
获得使用本类库的许可, 您必须保留著作权声明信息. 
报告漏洞,意见或建议, 请联系 Lou Barnes(iua1024@gmail.com) 
*/  
$(document).ready(function(){  
    loadMore();  
});   
  
$(window).scroll(function(){  
    // 当滚动到最底部以上100像素时, 加载新内容  
    if ($(document).height() - $(this).scrollTop() - $(this).height()<100) loadMore();  
});  
  
  
function loadMore()  
{  
    $.ajax({  
        url : 'data.php',  
        dataType : 'json',  
        success : function(json)  
        {  
            if(typeof json == 'object')  
            {  
                var oProduct, $row, iHeight, iTempHeight;  
                for(var i=0, l=json.length; i<l; i++)  
                {  
                    oProduct = json[i];  
                      
                    // 找出当前高度最小的列, 新内容添加到该列  
                    iHeight = -1;  
                    $('#stage li').each(function(){  
                        iTempHeight = Number( $(this).height() );  
                        if(iHeight==-1 || iHeight>iTempHeight)  
                        {  
                            iHeight = iTempHeight;  
                            $row = $(this);  
                        }  
                    });  
                      
                      
                    $item = $('<div><img src="'+oProduct.image+'" border="0" ><br />'+oProduct.title+'</div>').hide();  
                      
                    $row.append($item);  
                    $item.fadeIn();  
                }  
            }  
        }  
    });  
}

jQuery实现的瀑布流效果, 向下滚动即时加载内容的更多相关文章

  1. jQuery淡入淡出瀑布流效果

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

  2. 页面滚动动态加载数据,页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  3. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  4. 向下滚动页面加载图片的js

    js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...

  5. 风行一时瀑布流网页布局,实现无限加载(jquery)

    今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧 主要思路:一.根据屏幕宽度和单个浮动层的宽度来确定浮动层列数 var $boxs = $("#main>div" ...

  6. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  7. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  8. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  9. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

随机推荐

  1. Java自增原子性问题(测试Volatile、AtomicInteger)

    这是美团一面面试官的一个问题,后来发现这是一道面试常见题,怪自己没有准备充分:i++;在多线程环境下是否存在问题?当时回答存在,接着问,那怎么解决?...好吧,我说加锁或者synchronized同步 ...

  2. JVM——类加载器的双亲委派模型

    类加载器双亲委派模型,如下图所示: 双亲委派模型的工作过程 如果一个类加载器收到了类加载的请求,它首先不会自己去尝试加载这个类,而是把这个请求委派给父类加载器去完成,每一个层次的类加载器都是如此,因此 ...

  3. 格式化输出星期几 C#

    string Today = DateTime.Now.ToString("yyyy-MM-dd dddd",new System.Globalization.CultureInf ...

  4. Windows下PHP+Eclipse开发环境搭建 及错误解决(apache2.2服务无法启动 发生服务特定错误:1)

    前言 Eclipse与php/apache的关系:Eclipse只是用来写代码的,如果想要在浏览器查看运行效果就要让php/apache的运行目录指向你的代码目录.Eclipse貌似不会自己和apac ...

  5. Nodepad++ tab改成4个空格

    设置-首选项-选项卡设置-使用空格替换

  6. CXF之九 WS-Security

    Webservice 的安全 Webservice为作为方便的服务被用广大领域使用的同时,也成为了黑客们的美食.在这里,本文将就目前对Webservice安全所能做的改进做简单介绍.在Webservi ...

  7. 实现两个N*N矩阵的乘法,矩阵由一维数组表示

    实现两个N*N矩阵的乘法,矩阵由一维数组表示. 先介绍一下矩阵的加法: void Add(int rows, int cols) { ;i<rows;i++) { ;j<cols;j++) ...

  8. BF-KMP 算法

    #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include<string. ...

  9. backbone-1.3.3源码解析-----------Event

    第一次写,写的不对的请指正 backbone.js中的Event实现了自定义事件.自定义事件就是一个对象的键值对,key为事件名,value为一个function数组.在backbone这个对象中有一 ...

  10. CentOS7 安装 scala 2.11.1

    wget http://downloads.typesafe.com/scala/2.11.6/scala-2.11.6.tgz?_ga=1.61986863.2013247204.144801902 ...