1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>评论动态加载</title> 6 <style type="text/css"> 7 .comment{ 8 background: #FFF; 9 #border-bottom: red solid; 10 width: 600px; 11 height: 80px; 12 } 13 .comment div img{ 14 width: 80px; 15 height: 80px; 16 } 17 .left{ 18 float: left; 19 width: 80px; 20 height: 80px; 21 background: blue; 22 } 23 .right{ 24 float: right; 25 width: 520px; 26 height: 80px; 27 } 28 #container{ 29 position: relative; 30 left: 50%; 31 width: 600px; 32 margin-left: -300px; 33 } 34 #container ul{ 35 padding-left: 0px; 36 list-style: none; 37 } 38 #more{ 39 background: lightGray; 40 height: 30px; 41 line-height: 30px; 42 text-align: center; 43 cursor: pointer; 44 } 45 </style> 46 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 47 </head> 48 <body> 49 <div style="height:300px;"></div> 50 <div id="container"> 51 <ul id="contentList"> 52 <li class="comment"> 53 <div class="left"><img src="./g1.jpg"></div> 54 <div class="right"> 55 <div>一篇工作总结</div> 56 <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div> 57 </div> 58 </li> 59 <hr> 60 <li class="comment"> 61 <div class="left"><img src="./g.jpg"></div> 62 <div class="right"> 63 <div>一篇工作总结</div> 64 <div>上述知情人士透露，目前业内一些公司准备了专门的名单从电信运营商定向挖人，其筹码是数倍于运营商的薪酬、股权激励以及企业运营决策的自主权。</div> 65 </div> 66 </li> 67 <hr> 68 69 </ul> 70 <div id="more">加载更多...</div> 71 <input type="hidden" id="last" value="0"> 72 </div> 73 74 <script type="text/javascript"> 75 $(function(){ 76 $('#more').click(function(){ 77 var last = $('#last').val(); 78 var url = './data.php?last='+last+'&amount=2'; 79 queryComment(url); 80 }); 81 }); 82 83 function queryComment(url){ 84 $.ajax({ 85 type : "get", 86 async: true, 87 url : url, 88 dataType : "json", 89 success : function(data){ 90 if(data == 1){ 91 $('#more').html('没有更多评论!').unbind('click'); 92 return false; 93 } 94 $.each(data,function(i,element){ 95 var nickname = element.nickname; 96 var content = element.content; 97 var time = element.time; 98 var imgpath = element.imgpath; 99 var info = $('<li class="comment"><div class="left"><img src="'+imgpath+'"></div><div class="right"><div>'+nickname+'</div><div></div>'+content+'</div></li><hr>'); 100 $('#contentList').append(info); 101 }); 102 var now = parseInt($('#last').val()) + 2; 103 $('#last').val(now); 104 }, 105 error:function(){ 106 console.log('fail'); 107 } 108 }); 109 } 110 </script> 111 </body> 112 </html>