仿网易评论盖楼 JS 实现 | html

👋 相关阅读

• Web 加载速度优化清单，让你的网站快上加快
• 前端 | CSS 实现新拟态(Neumorphism) UI 风格
• 什么是防抖和节流？vue 中如何使用防抖和节流
• 巧用 Google 官方网页载入速度检测工具 Google page speed 改善网站加载速度
• 自动在网页中英文之间加空格

看了些评论引用盖楼的网站，觉得网易的效果比较好，简单明了，让人看了就知道是引用评论，迟点准备自己也写个玩玩，应该能从中学到不少东西. 前端部分实现如下：https://www.phpvar.com/archives/1382.html

JS部分实现如下：

<div class="comments">
        <div></div>
        <div class="coms_head">评论列表</div>
        <div class="coms_body" id="commentArea"></div>
</div>
<script>
var data = [
	{id:1,parent_id:0,content:'第一个'},
	{id:2,parent_id:0,content:'第二个'},
	{id:3,parent_id:1,content:'回复 第一个'},
	{id:4,parent_id:1,content:'回复 第一个'},
	{id:5,parent_id:3,content:'回复 回复 第一个'},
	{id:6,parent_id:5,content:'回复 回复 回复 第一个'},
	{id:7,parent_id:1,content:'回复 第一个'},
	{id:8,parent_id:2,content:'回复 第二个'},
];

function commentTree(commentList){
	var comment_str = "<div class='comment' >";
	commentList.forEach(function(row) {
		var temps = "<div class='content'>"+row.content+"</div>";
		comment_str += temps;
		console.log(row.children);
		if (row.children && row.children.length>0){
			comment_str +=commentTree(row.children);
		}
	});
	comment_str += "</div>";
	return comment_str;
}

function toTree(data) {
	data.forEach(function(item) {
		delete item.children;
	});
	var map = {};
	data.forEach(function(item) {
		map[item.id] = item;
	});
	var val = [];
	data.forEach(function(item) {
		var parent = map[item.parent_id];
		if (parent) {
			(parent.children || (parent.children = [])).push(item);
		} else {
			val.push(item);
		}
	});
	return commentTree(val);
}

var comment = toTree(data);
document.getElementById('commentArea').innerHTML=comment;
</script>

×