码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现的瀑布流效果, 向下滚动即时加载内容

时间:2015-08-12 16:27:42      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

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

后台用 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实现的瀑布流效果, 向下滚动即时加载内容

标签:

原文地址:http://www.cnblogs.com/sky6699/p/4724452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!