jQuery实现列表内容的动态载入特效
采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。
CSS:
.main{
width:100%;
margin-top:100px;
text-align:center;
font-size:12.5px;
}
th,td{
border:1pxsolid#ccc;
line-height:40px;
padding-left:5px;
}
.item:hover{
background-color:#efefef;
}
.item:nth-child(2n){
background-color:#efefef;
}
.ListView{
width:600px;
overflow:hidden;
margin:0auto;
padding:10px;
height:372px;
border:1pxsolid#dddddd;
}
.ListView.c{
width:1200px;
margin:0auto;
border-collapse:collapse;
}
.Item{
border-bottom:1pxdashed#dddddd;
padding:10px010px0;
overflow:hidden;
margin-left:600px;
}
.Itemspan{
float:left;
text-align:left;
}
.Itemspan:first-child{
color:#6AA8E8;
}
.Itemspan:last-child{
text-align:center;
}
HTML
<divclass="main"> <divclass="ListView"> <divclass="c"> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> <divclass="Item"><span>test</span><span>男/0</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div> </div> </div> </div> <pstyle="text-align:center;"><ahref="javascript:void(0);"onClick="ListView.Update();">刷新数据</a></p>
JS
<scripttype="text/javascript"src="/js/jquery-1.8.0.min.js"></script>
<scripttype="text/javascript">
$(function(){
ListView.Init();
});
varListView={
Init:function(){
$(".Itemspan").css("width",$(".ListView").width()/4+"px");
for(vari=0;i<$(".Item").length;i++){
vartarget=$(".Item")[i];
$(target).animate({marginLeft:"0px"},300+i*100);
}
},
Update:function(){
$(".ListView.c.Item").remove();
for(vari=0;i<10;i++){
varnewItem=$("<divclass=\"Item\"><span>test</span><span>男/"+i+"</span><span>四川省，成都市，锦江区</span><span>详细说明</span></div>");
$(newItem).find("span").css("width",$(".ListView").width()/4+"px");
$(".ListView.c").append(newItem);
$(newItem).animate({marginLeft:"0px"},300+i*100);
}
}
}
</script>
附上演示效果http://demo.jb51.net/js/2015/jquery-dtlb
效果是不是非常棒呢，接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码
下面的代码主要是控制滚动条下拉时的加载事件的
在下面代码说明出，写上你的操作即可，无论是加载图片还是加载记录数据 都可以
别忘了引用jquery类库
$(window).scroll(function(){
varscrollTop=$(this).scrollTop();
varscrollHeight=$(document).height();
varwindowHeight=$(this).height();
if(scrollTop+windowHeight==scrollHeight){
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
//varpage=Number($("#redgiftNextPage").attr('currentpage'))+1;
//redgiftList(page);
//$("#redgiftNextPage").attr('currentpage',page+1);
}
});
解析：
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop+clientHeight==scrollHeight。（兼容不同的浏览器）。