采用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 class="main"> <div class="ListView"> <div class="c"> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，錦江區</span> <span>詳細說明</span> </div> </div> </div></div><p style="text-align:center;"><a href="javascript:void(0);" onClick="ListView.Update();">刷新數據</a></p>
JS
<script type="text/javascript" src="/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>附上演示效果 http://demo.VeVB.COm/js/2015/jquery-dtlb
效果是不是非常棒呢，接下來我們再來看看瀑布流的實現思路和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。（兼容不同的瀏覽器）。
新聞熱點
疑難解答
