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

后台用 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. MySQL · 引擎特性 · InnoDB 崩溃恢复过程

    MySQL · 引擎特性 · InnoDB 崩溃恢复过程 在前面两期月报中,我们详细介绍了 InnoDB redo log 和 undo log 的相关知识,本文将介绍 InnoDB 在崩溃恢复时的主 ...

  2. SDE+ORACLE优化配置

    原文 SDE+ORACLE优化配置 SDE的性能取决于: 首先操作系统的性能:其次是Oracle的性能,再次是SDE的性能. 第一:操作系统,无非是内存.CPU.带宽等. 可以有待提高的地方:第一.硬 ...

  3. [Everyday Mathematics]20150215

    设 $n,k$ 是正整数, 使得 $x^{2k}-x^k+1$ 整除 $x^{2n}+x^n+1$. 试证: $x^{2k}+x^k+1$ 整除 $x^{2n}+x^n+1$.

  4. J2EE事务

    一.J2EE 事务处理方式 1. 本地事务:紧密依赖于底层资源管理器(例如数据库连接 ),事务处理局限在当前事务资源内.此种事务处理方式不存在对应用服务器的依赖,因而部署灵活却无法支持多数据源的分布式 ...

  5. ASP.NET 使用application和session对象写的简单聊天室程序

    ASP.Net中有两个重要的对象,一个是application对象,一个是session对象. Application:记录应用程序参数的对象,该对象用于共享应用程序级信息. Session:记录浏览 ...

  6. JDBC项目实践

    这几天学习了JDBC的接口,从简单的连接,到不断地对JDBC的代码进行优化,最后到实体类,DAO类的设计,现在对这几天所学做一个总结: 首先是软件的系统组成: 数据库中有很多的表:Customer,D ...

  7. awk与sed简明教程

    看到大牛写的关于awk和sed的简明教程,写得很好,为了尊重作者,就不全文转载了,这里标记下链接,方便以后查阅. awk简明教程:http://coolshell.cn/articles/9070.h ...

  8. 【转】Hibernate利用@DynamicInsert和@DynamicUpdate生成动态SQL语句

    原文链接:http://www.cnblogs.com/quanyongan/p/3152290.html 最近在使用Hibernate4中,发现两个很有奥秘的注解 @DynamicInsert 和  ...

  9. maven缺少依赖包,强制更新命令

    mvn clean install -e -U -e详细异常,-U强制更新

  10. 下拉框QComboBox相关函数

    QComboBox addItem (self, QString text, QVariant userData = QVariant())addItem (self, QIcon icon, QSt ...