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

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

后台用 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([e-mail]) 

*/  

$(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();  

                }  

            }  

        }  

    });  

}  

示例网址： http://product.1024i.com/ajax/waterfall/

资源下载： http://download.csdn.net/detail/iua1024/4216228

评论

1 楼 liuweihug 2014-10-29  

jquery瀑布流插件Wookmark完整使用demo -
http://www.suchso.com/projecteactual/jquery-Wookmark-use.html