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。(兼容不同的浏览器)。