前两天有个同学问我，这网易评论盖楼效果怎么实现的。前面我也不知道是怎么实现的，还特意上网查了下，却发现都是写了些div堆在那，怎么循环取数据都一概没写，这不

等于没写吗？？上课闲着没事，就把她写成这样了。。。

　　本来是搞.NET的，不过最近在上JAVAEE，就在NetBeans里写了。。。其实不涉及.NET或JAVA,反正都是些html和js代码，只要引入JQuery库。实现的效果如下：

 

 1 <!--
 2 To change this template, choose Tools | Templates
 3 and open the template in the editor.
 4 -->
 5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 6 <html>
 7   <head>
 8     <title></title>
 9     <style type="text/css">
10         .box{border:solid 1px #C4D6EC; margin:2px; padding:3px;background-color:white}
11         #comments{ width:500px;}
12 </style>
13     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
14     
15     <script type="text/javascript">
16         $(function(){
17 /*后台传过来的JSon格式的数据*/
18 var comments=[[{"name":"yyh","comment":"yyh"},{"name":"dudu","comment":"dudu"},{"name":"huihui","comment":"huihui"}],
19                 [{"name":"tiansong","comment":"tiansong"},{"name":"weiqi","comment":"weiqi"},{"name":"pengkun","comment":"pengkun"},{"name":"liyu","comment":"liyu"}]];
20 /*
21               comments[0]=[{"name":"yyh","comment":"yyh"},{"name":"dudu","comment":"dudu"},{"name":"huihui","comment":"huihui"}];
22               comments[1]=[{"name":"tiansong","comment":"tiansong"},{"name":"pengkun","comment":"pengkun"},{"name":"liyu","comment":"liyu"}];
23 */
24 
25 /*循环每条记录的每条数据，然后造div*/
26 for(var i=0;i<comments.length;i++){
27 var qian="";
28 var hou="";
29                 $.each(comments[i],function(key,value){
30                     qian +="<div class='box'>";
31                     hou += value.name+""+value.comment +"</div>";
32                 });
33 var comment=$("<div></div>");
34                 comment.html(qian+hou);
35                 $("#comments").append(comment);
36             }
37         });
38 </script>
39     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
40   </head>
41   <body>
42       <div id="comments">
43           
44       </div>
45   </body>
46 </html>