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