jQuery实现的瀑布流效果, 向下滚动即时加载内容
转载下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。
后台用 json 传输数据, 示例程序中只写了示例数组。数据也只设置了两个属性, 需根据实际应用改写。
页面用了 ul li 做为容器, 每个 li 表示一列
<ul id="stage">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
JS代码
/*
@版本日期: 版本日期: 2012年4月11日
@著作权所有: 1024 intelligence
获得使用本类库的许可, 您必须保留著作权声明信息.
*/
$(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/
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:HDU4707:Pet(DFS)
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
SpringBoot使用JDFrame实现Stream流效果
SpringBoot使用JDFrame实现Stream流效果
SpringBoot JDFrame Stream -
有趣的CSS - 文字加载动画效果
用 css 实现多字符模拟加载动画效果。
css 加载动画 交互 ux 动效 -
图片 jquery图片自滚动瀑布流效果
jquery图片自滚动瀑布流效果,不错的瀑布流效果查看原文查看在线演示Demo和更多原文内容教程:http://ibloger.net/article/1196.html
jquery图片自滚 图片自滚瀑布流 图片自滚瀑布流效果 图片自滚效果 图片自滚特效 -
jQuery下的瀑布流效果
使用jQuery制作瀑布流效果
jquery 瀑布流 html css -
jQuery下的瀑布流效果(改)
使用$(window).on("resize",waterfall); 使得瀑布流列数可以动态变化。包含加载数据的模拟。useJQ.html 瀑布流布局
jquery 瀑布流效果 resize css html