基於jQuery和Bootstrap框架實現仿知乎前端動態列表效果

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery入門技巧 >> 基於jQuery和Bootstrap框架實現仿知乎前端動態列表效果

編輯：JQuery入門技巧

最近基於jQuery和Bootstrap框架實現了一個仿知乎動態列表的前端效果，基本實現了和知乎動態列表相同的效果。如下：

1.基本列表項

2.列表項全文展開、折疊（圖中為展開第一項）

3.評論項展開

4.列表數據加載（加載全部）

5.帶動畫效果的點贊功能

6.回復列表的hover顯示功能

HTML代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> 
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /> 
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> 
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="scripts/jquery.json.min.js"></script> 
<link rel="stylesheet" href="styles/main.css" /> 
<script src="scripts/test.js"></script> 
</head> 
<body> 
<div style="display:none;"> 
<div id="t_dn" class="dynamic_node"> 
<meta class="dn_id" content=""/> 
<meta class="dn_user_id" content=""/> 
<div class="dn_left"> 
<div class="dn_user_avatar"><a href=""> 
<img class="img-thumbnail" src="" /></a> 
</div> 
<div class="dn_zannum"> 
<span></span> 
</div> 
<div class="dn_dianzan"> 
<a href=""><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a> 
</div> 
</div> 
<div class="dn_right"> 
<div class="dn_title"> 
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> 
<a href=""><span></span></a> 
</div> 
<div class="dn_right_top"> 
<div class="dn_username"> 
<a href=""><span class="dn_username_name"></span></a> 
<span class="dn_username_signature"></span> 
</div> 
<div class="dn_content_close1"> 
<a href=""> <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span> </a> 
</div> 
</div> 
<div class="dn_content"> 
<a href="" class="dn_content_link"> <span class="dn_content_digest"></span> </a> 
<span class="dn_content_text"></span> 
</div> 
<div class="dn_action"> 
<div class="dn_content_close2"> 
<a href=""> <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span> </a> 
</div> 
<a href=""><span class="dn_action_report">舉報</span></a> 
<a href=""><span class="dn_action_share">分享</span></a> 
<a href=""><span class="dn_action_comm">103條評論</span></a> 
<span class="dn_action_time"></span> 
</div> 
<div class="dn_comm"> 
<div class="dn_comm_items"> 
</div> 
<div class="dn_comm_showall"> 
<button id="dn_comm_showall_button" type="button" class="btn btn-default btn-xs">顯示全部評論</button> 
</div> 
<div class="dn_comm_replay"> 
<div class="dn_comm_replay_field"> 
<textarea class="form-control" rows="2" placeholder="寫下你的評論..."></textarea> 
</div> 
<div class="dn_comm_replay_buttoms"> 
<button type="button" class="btn btn-primary btn-sm">評論</button> 
<a href="" class="dn_comm_replay_buttoms_cancel">取消</a> 
</div> 
</div> 
</div> 
</div> 
</div> 
<div id="t_dn_comm" class="dn_comm_item"> 
<meta class="dn_comm_id" content=""> 
<div class="dn_comm_item_left"> 
<div> 
<a href="#"><img class="img-rounded" src="images/user.png" /> </a> 
</div> 
</div> 
<div class="dn_comm_item_mid"> 
<div class="dn_comm_item_middle_username"> 
<a href="#"><span>用戶名</span></a> 
</div> 
<div class="dn_comm_item_mid_content"> 
<span></span> 
</div> 
<div class="dn_comm_foot"> 
<div class="dn_comm_foot_left"> 
<span>2015-09-08 12:00:09</span> 
</div> 
<div class="dn_comm_item_mid_action"> 
<a href="#"><span>回復</span></a> 
<a href="#"><span>舉報</span></a> 
</div> 
</div> 
</div> 
<div class="dn_comm_item_right"> 
<div class="dn_comm_zannum"> 
<span>5</span> 
</div> 
<div class="dn_comm_dianzan"> 
<a href="#"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> </a> 
</div> 
</div> 
</div> 
</div> 
<div class="global"> 
<div class="list_layout"> 
</div> 
<div class="load_flag"> 
<button id="load_flag_button" type="button" class="btn btn-default btn-s">加載更多</button> 
<div id="load_flag_info"><small>沒有更多了 ！</small></div> 
</div> 
</div> 
</body> 
</html>

css文件代碼如下（main.css）：

<style> 
/* 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; 
} 
/*##############################################*/ 
/* */ 
</style> 
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<arr_dn.length;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("<a href='#'> 顯示全部</a>"); 
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<arr_dn.length;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" 
},

以上所述是小編給大家介紹的基於jQuery和Bootstrap框架實現仿知乎前端動態列表效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！

JQuery入門技巧

淺談jquery之on()綁定事件和off()解除綁定事件: off()函數用於移除元素上綁定的一個或多個事件的事件處理函數。off()函數主要用於解除由on()
jQuery Ajax傳值到Servlet出現亂碼問題的解決方法: 最近在學jquery ui,在做一個小功能的時候需要將前台的值獲取到，通過Ajax傳遞給Servle
jQuery編寫textarea輸入字數限制代碼: 本文實例為大家分享了jQuery textarea輸入字數限制的具體代碼，供大家參考，具體內容如下

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章