最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果，基本实现了和知乎动态列表相同的效果。如下：

1.基本列表项

2.列表项全文展开、折叠(图中为展开第一项)

3.评论项展开

4.列表数据加载(加载全部)

5.带动画效果的点赞功能

6.回复列表的hover显示功能

HTML代码如下：

css文件代码如下(main.css)：

/* global navigadion */

.nav{

width:100%;

height:3.5em;

padding-top:0em;

vertical-align:middle;

background-image: -moz-linear-gradient(top, #99FFFF, #FFFFFF);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #99FFFF), color-stop(1, #FFFFFF));

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99FFFF', endColorstr='#FFFFFF', GradientType='0');

}

.nav-content{

width:1024px;

margin-left: auto;

margin-right: auto;

}

#nav_user_name,#nav_user_avatar,#nav_btn_notice,#nav_btn_discuss,#nav_btn_read,#nav_btn_index,#nav_search_text,#nav_search_text{

margin-top:0.5em;

}

.brand{

font-size:2.5em;

font-weight:lighter;

color:#5e5e5e;

font-family: "Microsoft JhengHei"! important;

}

.avatar img{

padding:0.2em;

}

#notice_num{

visibility:visible;

backgroung-color:red;

color:white;

width: 1.6em;

height: 1.6em;

background: red;

-moz-border-radius: 1em;

-webkit-border-radius: 1em;

border-radius: 1em;

position:fixed;

}

#nav_user_name{

float:right;

}

#nav_user_avatar{

float:right;

}

.content{

width:1024px;

margin-left: auto;

margin-right: auto;

}

.left{

float:left;

width:100%;

}

.right{

background-color:white;

float:left;

width:100%;

}

.foot{

float:left;

}

.foot span{

font-size:0.8em;

font-weight:lighter;

}

.dashed-line{

border-bottom:1px dashed;

border-bottom-color:#C9C9C9;

}

/*##############################################*/

/* dynamic list */

.dynamic_node{

width:100%;

border-top:1px solid #eee;

padding-bottom:1em;

padding-top:1em;

float:left;

}

.dn_left{

width:50px;

float:left;

}

.dn_left img{

width:50px;

height:50px;

}

.dn_dianzan,.dn_zannum{

width:100%;

float:left;

margin-left:auto;

margin-right:auto;

text-align:center;

}

.dn_right{

padding-left:1em;

width:666px;

float:left;

}

.dn_title label{

font-weight:lighter;

color:#6b6b6b;

}

.dn_title a span{

color:#259;

font-weight:bold;

}

.dn_username_name{

font-weight:bold;

font-size:0.8em;

color:#259;

}

.dn_username_signature{

font-size:0.8em;

}

.dn_action{

float:right;

}

.dn_action span{

float:right;

margin-left:1em;

margin-top:1em;

font-size:0.8em;

}

.dn_content_digest,.dn_content_text{

float:left;

font-size:0.8em;

color:#363636;

width:100%;

}

.dn_content_text{

display:none;

}

.dn_content_close1,.dn_content_close2{

float:right;

display:none;

font-size:1em;

}

.dn_action{

display:none;

float:right;

}

.dn_comm{

float:left;

width:100%;

display:none;

}

.dn_comm_items{

float:left;

width:100%;

}

.dn_comm_item{

float:left;

margin-top:0.8em;

border-top:1px solid #eee;

padding-top:0.8em;

}

.dn_comm_item_left{

width:50px;

float:left;

}

.dn_comm_item_mid{

width:560px;

float:left;

}

.dn_right_top{

width:100%;

float:left;

}

.dn_comm_item_right{

width:30px;

float:right;

text-align:center;

}

.dn_comm_item_left img{

width:30px;

height:30px;

}

.dn_comm_item_middle_username,.dn_comm_item_mid_content,.dn_comm_item_mid_time{

float:left;

font-size:0.8em;

}

.dn_comm_item_mid_action{

float:right;

margin-left:1em;

font-size:0.8em;

display:none;

}

.dn_comm_item_mid_action span{

margin-left:1em;

}

.dn_comm_dianzan{

font-size:1em;

width:100%;

margin-left:auto;

margin-right:auto;

}

.dn_comm_zannum{

font-size:1em;

color:#797979;

width:100%;

margin-left:auto;

margin-right:auto;

}

.dn_comm_foot_left{

float:left;

padding-top:0.4em;

color:#797979;

width:50%;

font-size:0.7em;

}

.dn_comm_replay{

float:left;

width:100%;

margin-top:1em;

padding-top:1em;

border-top:1px solid #eee;

}

.dn_comm_replay_field{

float:left;

width:100%;

margin-bottom:1em;

}

.dn_comm_replay_buttoms a,button{

float:right;

}

.dn_comm_replay_buttoms_cancel{

padding-top:0.5em;

margin-right:1em;

}

.dn_comm_dianzan{

width:100%;

float:left;

}

.dn_comm_showall{

float:left;

width:100%;

margin-top:1em;

padding-top:1em;

border-top:1px solid #eee;

}

.dn_comm_showall #dn_comm_showall_button{

float:left;

width:80%;

margin-left:10%;

margin-right:10%;

margin-top:1em;

border-top:1px solid #eee;

}

/*##############################################*/

/* */

.global{

width:716px;

}

.list_layout,.load_flag{

width:100%;

float:left;

display:block;

}

.load_flag{

padding-top:1em;

border-top:1px solid #eee;

margin-bottom:3em;

}

.load_flag button{

float:left;

width:80%;

margin-left:10%;

margin-right:10%;

}

.load_flag #load_flag_info{

float:left;

text-align:center;

width:80%;

margin-left:10%;

margin-right:10%;

display:none;

}

/*##############################################*/

/* */

js文件内容如下(test.js)：

[javascript] view plain copy

$(document).ready(function(){

url_user = "http://user.com/i=";

url_img = "http://127.0.0.1/pages/";

url_dianzan = "http://dianzan.com";

url_dn_detail = "http://dt.com/i=";

layout_list = $(".list_layout");

t_dn = $("#t_dn");

t_dn_comm = $("#t_dn_comm");

maxnum = 2; // 最大加载次数

num = 1;

load_flag = $(".load_flag");

function render_dn_list(arr_dn){

for(var i=0; i

var node_dn = t_dn.clone();

node_dn.find(".dn_id").attr("content",arr_dn[i]["ID"]); //动态ID

node_dn.find(".user_id").attr("content",arr_dn[i]["userid"]); //用户ID

node_dn.find(".dn_left .dn_user_avatar a").attr("href",url_user+arr_dn[i]["userid"]); // 用户名链接

node_dn.find(".dn_left .dn_user_avatar a img").attr("src",url_img+arr_dn[i]["avatar"]); // 用户头像

node_dn.find(".dn_zannum span").text(arr_dn[i]["zan"]); // 点赞数

//node_dn.find(".dn_dianzan a").attr("href",arr_dn[i]["avatar"]); // 点赞链接

node_dn.find(".dn_title a").attr("href",url_dn_detail+arr_dn[i]["fid"]+"#"+arr_dn[i]["ID"]); //跳转动态所在页锚点

node_dn.find(".dn_title a span").text(arr_dn[i]["from"]); // 所属标题

node_dn.find(".dn_username a").attr("src",url_user+arr_dn[i]["userid"]); //用户名链接

node_dn.find(".dn_username_name").text(arr_dn[i]["username"]); //用户名

node_dn.find(".dn_username_signature").text(arr_dn[i]["signature"]); //用户签名

var digest = "";

var content = arr_dn[i]["content"];

if(content.length > 150){

digest=content.substring(0,150)+"... ";

}

else{

digest=content;

}

node_dn.find(".dn_content_digest").text(digest); //摘要

node_dn.find(".dn_content_digest").append(" 显示全部");

node_dn.find(".dn_content_text").text(content); // 正文

node_dn.find(".dn_action_time").text(arr_dn[i]["posttime"]); // 发布时间

// 添加点击摘要事件

node_dn.find(".dn_content_digest").click(

function(){

var dn_right = $(this).parent().parent().parent();

dn_right.find(".dn_content_text").toggle();

dn_right.find(".dn_content_digest").toggle();

dn_right.parent().find(".dn_content_close1").toggle();

dn_right.parent().find(".dn_content_close2").toggle();

dn_right.parent().find(".dn_action").toggle();

var comm= dn_right.find(".dn_comm");

if(comm.css("display") == "block"){

comm.css("display","none");

}

return false; // !!

}

);

// 添加点击折叠事件

node_dn.find(".dn_content_close2,.dn_content_close1").click(

function(){

var dn_right = $(this).parent().parent();

dn_right.find(".dn_content_text").toggle();

dn_right.find(".dn_content_digest").toggle();

dn_right.parent().find(".dn_content_close1").toggle();

dn_right.parent().find(".dn_content_close2").toggle();

dn_right.parent().find(".dn_action").toggle();

var comm= dn_right.find(".dn_comm");

if(comm.css("display") == "block"){

comm.css("display","none");

}

return false; // !!

}

);

// 为评论、分享、举报按钮添加hover下划线效果

node_dn.find(".dn_action_comm,.dn_action_share,.dn_action_report").hover(

function(){

$(this).css("text-decoration","underline");

return false; // !!

}

,

function(){

$(this).css("text-decoration","none");

return false; // !!

}

);

// 为列表项添加点赞事件

node_dn.find(".dn_dianzan").click(

function(){

//alert('zan');

var dn_left = $(this).parent();

var zan_num = dn_left.find(".dn_zannum span");

var currzan = zan_num.text();

zan_num.text(parseInt(currzan)+1);

zan_num.animate({fontSize:"1.2em"},"fast");

$(this).animate({fontSize:"1.2em"},"fast");

zan_num.animate({fontSize:"1em"},"fast");

$(this).animate({fontSize:"1em"},"fast");

return false; // !!

}

);

// 加载评论，并处理评论项事件

function load_comm(dn_id,dn_comm_items,flag){

var load_url = "mockdata/commdata_";

if(flag == 1){

load_url = "mockdata/commdata_";

}

else{

load_url = "mockdata/commdata_";

}

$.ajax({

url:"mockdata/commdata_"+dn_id,

type: "get",//使用get方法访问后台

dataType: "json",//返回json格式的数据

async:false,

//data: "pageIndex=" + pageIndex,//要发送的数据

complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示

success: function(msg){//msg为返回的数据，在这里做数据绑定

var encoded = $.toJSON(msg);

ret_code =$.evalJSON(encoded).code;

arr_dn =$.evalJSON(encoded).data;

if(ret_code == "200"){

for(var i=0;i

var n_comm = t_dn_comm.clone();

n_comm.find(".dn_comm_id").attr("content",arr_dn[i]["ID"]);

n_comm.find(".dn_comm_item_left a").attr("href",url_user+arr_dn[i]["userid"]);

n_comm.find(".dn_comm_item_left img").attr("content",url_img+arr_dn[i]["avatar"]);

n_comm.find(".dn_comm_item_middle_username a").attr("href",url_user+arr_dn[i]["userid"]);

n_comm.find(".dn_comm_item_middle_username a span").text(arr_dn[i]["username"]);

n_comm.find(".dn_comm_item_mid_content span").text(arr_dn[i]["content"]);

n_comm.find(".dn_comm_foot_left span").text(arr_dn[i]["posttime"]);

n_comm.find(".dn_comm_zannum span").text(arr_dn[i]["zan"]);

// 为评论项添加hover效果

n_comm.hover(function(){

$(this).find(".dn_comm_item_mid_action").toggle();

});

// 为评论项添加点赞动画效果

var zan = n_comm.find(".dn_comm_dianzan");

zan.click(

function(){

var zan_num = $(this).parent().find(".dn_comm_zannum");

var currzan = zan_num.text();

zan_num.text(parseInt(currzan)+1);

zan_num.animate({fontSize:"1.2em"},"fast");

$(this).animate({fontSize:"1.2em"},"fast");

zan_num.animate({fontSize:"1em"},"fast");

$(this).animate({fontSize:"1em"},"fast");

return false;

}

);

dn_comm_items.append(n_comm);

}

}

else{

alert(ret_code);

}

}

});

};

// 加载某一项的热门评论

node_dn.find(".dn_action_comm").click(

function(){

var dn = $(this).parent().parent().parent().parent();

dn.find(".dn_comm").toggle();

var dn_comm_items = dn.find(".dn_comm_items");

dn_comm_items.empty();

var dn_id = dn.find(".dn_id").attr("content");

load_comm(dn_id,dn_comm_items,0);

return false; // !!

}

);

// 加载某一项的全部评论

node_dn.find(".dn_comm_showall_button").click(

function(){

var dn = $(this).parent().parent().parent().parent();

var dn_comm_items = dn.find(".dn_comm_items");

dn_comm_items.empty();

var dn_id = dn.find(".dn_id").attr("content");

load_comm(dn_id,dn_comm_items,1);

return false; // !!

}

);

//

layout_list.append(node_dn);

}

}

function fill_list(){

$.ajax({

url:"mockdata/listdata",

type: "get",//使用get方法访问后台

dataType: "json",//返回json格式的数据

async:false,

//data: "pageIndex=" + pageIndex,//要发送的数据

complete :function(){$("#load").hide();},//AJAX请求完成时隐藏loading提示

success: function(msg){//msg为返回的数据，在这里做数据绑定

var encoded = $.toJSON(msg);

ret_code =$.evalJSON(encoded).code;

arr_dn =$.evalJSON(encoded).data;

if(ret_code == "200"){

render_dn_list(arr_dn);

}

else{

alert(ret_code);

}

}

});

}

// 为加载数据按钮注册事件

$(".load_flag").click(function(){

if(num <= maxnum){

fill_list();

num++;

}

else{

load_flag.find("#load_flag_info").css("display","block");

load_flag.find("#load_flag_button").css("display","none");

}

});

fill_list();

});

伪造的列表数据格式：{

"code":"200",

"data":[

{

"ID":"1",

"fid":"1212",

"userid":"1001",

"avatar":"images/user.png",

"type":"阅读注解",

"from":"金刚经/第一品 法会因由分",

"username":"用户名",

"signature":"用户个性签名",

"digest":"内容摘要内容摘。要内容摘要,要内容要内容",

"content":"时长老须菩提。在大众中。即从座起。偏袒右肩。右膝着地。合掌恭敬。而白佛言。希有世尊。如来善护念诸菩萨。善付嘱诸菩萨。世尊。善男子。善女人。发阿耨多罗三藐三菩提心。应云何住，云何降伏其心。佛言。善哉善哉。须菩提。如汝所说。如来善护念诸菩萨。善付嘱诸菩萨。汝今谛听。当为汝说。善男子。善女人。发阿耨多罗三藐三菩提心。应如是住，如是降伏其心。唯然。世尊。愿乐欲闻。",

"posttime":"2015-09-08 12:00:09",

"zan":"100"

},

{

"ID":"3",

"fid":"1212",

"userid":"1001",

"avatar":"images/user.png",

"type":"阅读注解",

"from":"金刚经/第一品 法会因由分",

"username":"用户名",

"signature":"用户个性签名",

"digest":"内容摘要内容摘。要内容摘要,要内容要内容",

"content":"不于一佛二佛三四五佛而种善根。已于无量千万佛所种诸善根。闻是章句。乃至一念生净信者。须菩提。如来悉知悉见。是诸众生。得如是无量福德。何以故。是诸众生无复我相。人相。众生相。寿者相。无法相。亦无非法相。何以故。是诸众生。若心取相。则为著我人众生寿者。若取法相。即著我人众生寿者。何以故。若取非法相，即著我人众生寿者。是故不应取法。不应取非法。",

"posttime":"2015-09-08 12:00:09",

"zan":"100"

},

伪造的评论数据格式：{

"code":"200",

"data":[

{

"ID":"100001",

"fid":"1212",

"userid":"1001",

"avatar":"images/user.png",

"username":"用户名",

"content":"时长老须菩提。善付嘱诸菩萨。汝今谛听。当为汝说。善男应如是住，如是降伏其心。唯然。世尊。愿乐欲闻。",

"posttime":"2015-09-08 12:00:09",

"zan":"100"

},

{

"ID":"100001",

"fid":"1212",

"userid":"1001",

"avatar":"images/user.png",

"username":"用户名",

"content":"时长老须菩提。善付嘱诸菩萨。汝今谛听。当为汝说。善男应如是住，如是降伏其心。唯然。世尊。愿乐欲闻。",

"posttime":"2015-09-08 12:00:09",

"zan":"100"

},

本文原创发布php中文网，转载请注明出处，感谢您的尊重！