首先，前端写html布局，效果图如下：
可以发现，除了数据不一样之外，其他的布局都是一样的。整体都是下图的循环：
所以直接写布局，html布局如下：
<div class="contents cleafix" style="width: 100%; margin: auto; margin-top: 2%; /* border: 1px solid red;*/ background-color: #FFFFFF;">
<br />
<div class="body-title" style="width:100%;height:10%;margin-top:-1%;">
<div class="layui-inline Head-Images" style="width:20%;margin-top:-2%;margin-left:-8%;">
<img src="~/images/UserIcon.png" style="border-radius:50%;width:45%;height:85px;float:right;" />
</div>
<div class="Head-Names" style="width: 75%; float: right;margin-right:10%;margin-top:-1%;">
<div class="Head-Names-top">
<p>
<span style="font-size:15px;font-weight:bold;">胡汉三</span>
<span style="margin-left: 3%;margin-top:1%; background-color: #3FA1FF;border-radius:50px;padding:1%;color:#FFFFFF;font-size:12px;"> 主题主题主题 </span>
</p>
</div>
<div class="Head-Names-bottom" style="margin-top:2%;overflow:hidden;">
<span style="float: left; font-size: 15px; font-weight: bold;"> 测试责任区</span>
@*<span style="float:right;font-size:15px;"> 2022.12.20 12:12:12</span>*@
</div>
</div>
</div>
<div class="body-content" style="margin:1% 5%;width:95%;">
<p style="width:95%;font-size:15px;">
严格落实 严格落实 严格落实 严格落实 严格落实 严格落实 严格落实 严格落实 严格落实 严格落实 严格落实
</p>
<div style="margin:1% 0 2% 0;padding:0 1.5% 0 1.5%;">
<img src="~/Content/img/dx-bj.png" style="width:15%;" />
<img src="~/Content/img/dx-bg.png" style="width:15%;" />
<img src="~/images/UserIcon.png" style="width:15%;" />
<img src="~/Content/img/dx-bj.png" style="width:15%;" />
<img src="~/Content/img/dx-bg.png" style="width:15%;" />
<img src="~/images/UserIcon.png" style="width:15%;" />
</div>
</div>
<div class="body-time" style="margin:2% 5%;width:100%;">
<p style="width: 55%;margin:0 0 5% 0;float:left">
<span style="font-size:15px;">2020-12-18 15:33:34 </span>
<span style="font-size:12px; margin-left:2%;color:#adadad">删除 </span>
</p>
<p style="width: 15%;margin:-0.5% 0 5% 6%;float:right">
<span style="float:left;"><a><img src="~/Content/img/axdz.png" /></a> </span>
<span style="float:left;margin-top:-1.5%;margin-left:10%;"><a><img src="~/Content/img/bj-cz.png" /></a></span>
</p>
<p style="height:15px;"></p>
</div>
<br />
</div>
css我都放出来，你们根据上面需要的保留，剩余的删掉就行了：
<style type="text/css">
/*高度为内容高度*/
.layui-table-cell {
white-space: normal;
height: auto !important;
word-break: break-all;
}
#Count {
margin: auto;
width: 100%;
border: 1px solid red;
/*overflow: hidden;*/
}
/*清除浮动*/
.cleafix:after {
content: '.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
#div-left {
width: 60%;
float: left;
overflow: hidden;
border: 1px solid #4cff00;
}
#div-right {
width: 39%;
float: left;
overflow: hidden;
border: 1px solid #0094ff;
}
#divleft-header {
width: 100%;
}
#divleft-body {
width: 100%;
}
</style>
静态页大概布局：
然后就是流布局加载这个div并且填充数据了，首先，我们先指定流加载的div:
<div id="divleft-body">
//流加载容器
</div>
然后就是js部分，ajax不做多余赘述：
var popUp = {
//后台请求数据时显示
Load: function () {
var index = layer.load(3);//icon默认设置成3,可供选择1,2,3
return index;
};
//输入文本弹出框。 inputType=1为单行文本(password)，inputType=2为多行文本框， inputType=3为单行文本框(text)；title为标题信息
Prompt: function (inputType, title, confirmCallBack) {
if (!Number(inputType)) {
inputType = 1;
}
if (!title) {
title = "请输入："
}
layer.prompt({
formType: inputType,
title: title
}, confirmCallBack);
}
layui.use('flow', function () {
var flow = layui.flow;
var page = 1;// 页数
var size = 5;// 每页展示5个
flow.load({
elem: '#divleft-body', //流加载容器
isAuto: true,
done: function (page, next) {
//执行下一页的回调
//模拟数据插入
setTimeout(function () {
var lis = [];
$.post('@Url.Action("接口名称")', { page: page, limit: size, data: { } }, function (res) {
console.log(res);
var resc = '', pages = res.data.pageList;
if (res != null && res != "") {
if (res.data != null && res.data != "") {
page++;
if (res.data.pageList != null && res.data.pageList != "") {
//内容请求到了以后，遍历,
for (var item in pages) {
var dbs = '', dynamic = '', stylecss = '', styleimg = '', likes = '', dels = '', comment = '',task='';
//当名称不为空，追加div样式
if (pages[item].planName != null && pages[item].planName != "") {
dbs = ` <span style="margin-left: 3%;margin-top:1%; background-color: #3FA1FF;border-radius:50px;padding:1%;color:#FFFFFF;font-size:12px;"> ${pages[item].planName == null ? "" : pages[item].planName} </span>`;
}
//遍历文件
if (pages[item].files != null && pages[item].files != "") {
for (var it in pages[item].files)
{
dynamic += `<img src="${pages[item].files[it].path}" style="width:15%;" />`
}
}
//点赞
if (pages[item].likes != null && pages[item].likes.length > 0)
{
stylecss = `style="background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;color:#70A2ED;margrin-top:-5%;"`;
styleimg = ` <img src="/Content/img/axydz.png" />`;
let j = 0;
for (var im = 0; im < pages[item].likes.length; im++)
{
//用户名不能为空
if (pages[item].likes[im].createUserName != null && pages[item].likes[im].createUserName != "") {
if (pages[item].likes.length == 1)
{
likes += `<a data-fileid='${pages[item].likes[im].createUserId}'style="color:#488AEE;">${pages[item].likes[im].createUserName}</a>`;
}
else {
if (j == pages[item].likes.length - 1) {
likes += `<a data-fileid='${pages[item].likes[im].createUserId}'style="color:#488AEE;">${pages[item].likes[im].createUserName}</a>`;
} else {
likes += `<a data-fileid='${pages[item].likes[im].createUserId}'style="color:#488AEE;">${pages[item].likes[im].createUserName}、</a>`;
}
}
j++;
}
}
}
//当前账号与发布用户是否是同一人，是则显示删除
if (UserId == pages[item].createUserId)
{
dels = `<span style="font-size:12px; margin-left:4%;color:#adadad" data-fileid="${pages[item].id}" class="dbsDel" id="ab-${pages[item].id}">删除 </span>`;
}
//评论, 评论回复
if (pages[item].comments != null && pages[item].comments.length > 0) {
// likes += `<a data-fileid='${pages[item].comments[im].createUserId}'style="color:#488AEE;">${pages[item].comments[im].createUserName}</a>、`;
var com = pages[item].comments;
for (var dbc in com)
{
//评论
if (com[dbc].noteId == com[dbc].fatherId)
{
comment += `<p style="background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;">
<span class="btnCom" id="xyz-${com[dbc].id}" data-fileid='${pages[item].id}' dataid='${com[dbc].id}' data-hfid="${com[dbc].fatherId}">
<a data-fileid='${com[dbc].createUserId}' dataid='${com[dbc].id}' style="color:#70A2ED;"> ${com[dbc].createUserName}</a>:
${com[dbc].content}
</span>
</p>`;
}
//回复
else
{
comment += `<p style="background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;">
<span class="btnCom" data-fileid='${pages[item].id}' id="xyz-${com[dbc].id}" dataid='${com[dbc].id}' data-hfid="${com[dbc].fatherId}">
<a data-fileid='${com[dbc].createUserId}'style="color:#70A2ED;" > ${com[dbc].createUserName}</a> 回复
<a data-fileid='${com[dbc].fatherId}'dataid='${com[dbc].id}' style="color:#70A2ED;"> ${com[dbc].fatherUserName}</a>:
${com[dbc].content}
</span>
</p>`;
}
}
}
if (pages[item].taskName != null && pages[item].taskName != "" && pages[item].schoolName != null && pages[item].schoolName != null) {
task = `${pages[item].taskName == null ? "" : pages[item].taskName}`;
}
else
{
task = '暂无数据';
}
if (pages[item].createUserName != null)
{
//加载div主体部分，上面是加载主体数据
resc += ` <div style="clear:both;">
<hr style="width:90%;margin:auto;margin-top:2%;margin-bottom:3%;color:#808080"/>
</div>
<div class="contents" style="width: 100%; margin: auto; margin-top: 2%; ">
<br />
<div class="body-title" style="width:100%;height:20%;margin-top:-1%;">
@*头像部分*@
<div class="layui-inline Head-Images" style="width:20%;margin-top:-2%;margin-left:-8%;">
<img src="${pages[item].headSculpture == null ? '/images/UserIcon.png' : pages[item].headSculpture}" style="border-radius:50%;width:45%;height:85px;float:right;" />
</div>
@*个人信息以及主题*@
<div class="Head-Names" style="width: 75%; float: right;margin-right:10%;margin-top:-1%;">
<div class="Head-Names-top">
<p>
<span style="font-size:15px;font-weight:bold;">${pages[item].createUserName}</span>
${dbs}
</p>
</div>
<div class="Head-Names-bottom" style="margin-top:2%;font-size:15px;font-weight:bold;">${task}</div>
</div>
</div>
<div class="body-content" style="margin:1% 5%;width:95%;magrin-top:1.5%;">
<p style="width:90%;font-size:15px;">
${pages[item].content}
</p>
//内容主题包含图片，则遍历图表数组，每一行6张
<div class="dynamicImages" style="margin:1% 0 2% 0;padding:0 1.5% 0 1.5%;">
${dynamic}
</div>
</div>
<div class="body-time" style="margin:2% 5%;width:100%;overflow:hidden;">
<p style="width: 55%;float:left">
<span style="font-size:15px;">${pages[item].createTimeStr}</span>
${dels}
</p>
<p style="width: 18%;float:right">
<span style="float:left;">
<img data-fileid='${pages[item].id}' class="dzlike" id="${pages[item].id}" data-isLike='${pages[item].isLike}' src="${pages[item].isLike == false ? '/Content/img/axdz.png' : '/Content/img/axydz.png'}" />
</span>
<span style="float:left;margin-top:-1.5%;margin-left:10%;"><a class="btnComment" id="xy-${pages[item].id}" data-fileid='${pages[item].id}'><img src="/Content/img/bj-cz.png" /></a></span>
</p>
<p style="height:15px;"></p>
</div>
@* 点赞*@
<div class="dzxg" ${stylecss} data-fileid='${pages[item].id}'>
${styleimg}
${likes}
</div>
@*评论*@
<div style="width:85%;height:1px;margin:auto" ></div>
<div class="comment" id="abcd-${pages[item].id}">
${comment}
</div>
</div>`;
}
}
}
else {
resc = "<p style='text-align:center;font-size:18px;font-family:SimHei'>暂无数据</p>";
}
}
else {
resc = "<p style='text-align:center;font-size:18px;font-family:SimHei'>暂无数据</p>";
}
}
else {
resc = "<p style='text-align:center;font-size:18px;font-family:SimHei'>暂无数据</p>";
}
/* $(".message").empty();*/
/* $(".message").append(resc);*/
//追加
lis.push(resc);
resc = '';
var dd = res.data.totalRow;
var totalPage = dd / size;
next(lis.join(''), page < totalPage); //假设总页数为 10
//initPhotoSwipeFromDOM('.message');
});
}, 500);
}
});
});
然后就是点赞，评论，回复，取消点赞等操作：
//点赞，取消点赞
$(document).on("click", ".dzlike", function () {
var like = $(this).attr("data-isLike");
var id = $(this).attr("data-fileid");
if (like == "true")
{
//取消点赞
$.ajax({
url: '@Url.Action("LikeOrNot","Notes")',
type: "POST",
data: { noteId: id, type: "remove" },//笔记ID
dataType: "Json",
success: function (result) {
if (result.code == 0) {
//取消点赞更换图标
var dzz = document.getElementById(id);
console.log("dzz");
console.log(dzz);
dzz.removeAttribute("src");
dzz.removeAttribute("data-isLike");
dzz.setAttribute("src", "/Content/img/axdz.png");
dzz.setAttribute("data-isLike", "false");
//删除当前用户的点赞信息
var div = dzz.parentNode.parentNode.parentNode.nextElementSibling;//获取太爷爷兄弟的兄弟节点
var aNumber = div.getElementsByTagName('a').length;//获取a标签个数（成对）
var abc = div.getElementsByTagName('a');
if (aNumber > 1)
{
for (var i = 0; i < abc.length; i++)
{
//var asp = JSON.stringify(abc[i]).indexOf(UserId);
if (abc[i].dataset.fileid == UserId)
{
div.removeChild(abc[i]);
}
}
}
else
{
var childs = div.getElementsByTagName('a');
for (var i = childs.length - 1; i >= 0; i--)
{
//当前只有一个赞，判断是否是当前用户点的赞，是，则iy++;
var iy = 0;
if (abc[i].dataset.fileid == UserId)
{
iy++;
}
//当前用户已点赞了又取消时，iy>0，移除所有节点
if (iy > 0)
{
var items = div.childNodes;
for (var i = items.length - 1; i >= 0; i--)
{
div.removeChild(items[i]);
}
}
}
}
}
}
});
}
else {
$.ajax({
url: '@Url.Action("LikeOrNot","Notes")',
type: "POST",
data: { noteId: id, type: "add" },//笔记ID
dataType: "Json",
success: function (result) {
if (result.code == 0) {
//点赞更换图标
var dzz = document.getElementById(id);
dzz.removeAttribute("src");
dzz.removeAttribute("data-isLike");
dzz.setAttribute("src", "/Content/img/axydz.png");
dzz.setAttribute("data-isLike", "true");
//删除当前用户的点赞信息
var div = dzz.parentNode.parentNode.parentNode.nextElementSibling;//获取太爷爷兄弟的兄弟节点
var aNumber = div.getElementsByTagName('a').length;//获取a标签个数（成对）
if (aNumber >= 1)
{
var para = document.createElement("a");
var model = document.createTextNode("、"+UserFullName);
para.style.color = "#488AEE";
para.setAttribute("data-fileid", UserId);
para.appendChild(model);
div.appendChild(para);
} else
{
var Stylediv = "background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;color:#70A2ED;margrin-top:-5%;";
//追加div的css特效
div.setAttribute("style", Stylediv);
//追加点赞效果
var Img = document.createElement("img");
Img.src = "/Content/img/axydz.png";
//Img.style.marginLeft = "2%";
div.appendChild(Img);
//追加当前点赞用户
var para = document.createElement("a");
var model = document.createTextNode(UserFullName);
para.style.color = "#488AEE";
para.setAttribute("data-fileid", UserId);
para.appendChild(model);
div.appendChild(para);
}
}
}
});
}
});
//删除发布内容
$(document).on("click", ".dbsDel", function () {
var id = $(this).attr("data-fileid");
var sid = "ab-" + id;
layer.confirm("确认删除？", {
btn: ['确定', '返回'] //按钮
}, function (index) {
$.ajax({
type: "POST",
dataType: "json",
url: '@Url.Action("DeleteNote")',
data: { noteId: id },
success: function (result) {
if (result.code == 0)
{
//请求成功后，获取并移除太爷爷节点
var div = document.getElementById(sid).parentNode.parentNode.parentNode;
div.remove();
//弹出层
alert("笔记删除成功！");
//关闭当前弹出层
layer.closeAll();
}
}
});
}, function (index) {
});
});
//单击评论图标，弹出。
$(document).on("click", ".btnComment", function () {
//获取实时id
var CommentId = $(this).attr("data-fileid");
var dataid = "xy-" + CommentId;
//获取获取太爷爷节点下面第四个兄弟节点（评论挂载模块Id）
var divCommentId = document.getElementById(dataid).parentNode.parentNode.parentNode.nextElementSibling.nextElementSibling.nextElementSibling.getAttribute("id");
var id = $(this).attr("data-fileid");
popUp.Prompt(2, "评论", function (value, index) {
console.log(id);
//获取Id
if (!value) {
alert("评论不能为空！");
return;
}
if (id == null) {
alert("评论失败！");
return;
}
$.ajax({
url: '@Url.Action("AddReply","Notes")',
type: "POST",
data: { noteId: id, replyId: id, content: value },
dataType: "Json",
success: function (result) {
if (result.code == 0) {
var datas = result.data;
console.log(datas);
//组装a
var a = document.createElement("a");
a.appendChild(document.createTextNode(UserFullName));
a.style.color = "#70A2ED";
a.setAttribute("data-fileid", UserId);
//组装span
var span = document.createElement("span");
span.appendChild(a);
span.appendChild(document.createTextNode(":" + value));
span.setAttribute("class", "btnCom");
span.setAttribute("id", "xyz-" + id);
span.setAttribute("data-fileid", id);
span.setAttribute("data-hfid", id);
span.setAttribute("dataid", id);
//组装p
var p = document.createElement("p");
//var pstyle = "background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;";
var pstyle = 'background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;';
p.setAttribute("style", pstyle);
p.appendChild(span);
var comid = document.getElementById(divCommentId);
//追加节点
comid.appendChild(p);
layer.closeAll();
}
}
});
})
});
//单击评论内容，回复
$(document).on("click", ".btnCom", function () {
var comm = document.getElementById($(this).attr("id")).parentNode.getElementsByTagName('a')[0].innerHTML;
console.log($(this).attr("dataid"));
//获取实时id
var CommentId = $(this).attr("data-fileid");
var hfCommentId = $(this).attr("data-fileid");
//获取爷爷节点的ID，方便后续追加
var divCommentId = document.getElementById($(this).attr("id")).parentNode.parentNode.getAttribute("id");
var id = $(this).attr("data-fileid");
popUp.Prompt(2, "评论", function (value, index) {
console.log(id);
//获取Id
if (!value) {
alert("评论不能为空！");
return;
}
if (id == null) {
alert("评论失败！");
return;
}
$.ajax({
url: '@Url.Action("AddReply","Notes")',
type: "POST",
data: { noteId: id, replyId: hfCommentId, content: value },
dataType: "Json",
success: function (result) {
if (result.code == 0) {
var datas = result.data;
//组装a
var a = document.createElement("a");
a.appendChild(document.createTextNode(UserFullName));
a.style.color = "#70A2ED";
a.setAttribute("data-fileid", UserId);
//组装第二个a
var a1 = document.createElement("a");
a1.appendChild(document.createTextNode(comm));
a1.style.color = "#70A2ED";
a1.setAttribute("data-fileid", hfCommentId);
//组装span
var span = document.createElement("span");
span.appendChild(a);
span.appendChild(document.createTextNode(" 回复 "));
span.appendChild(a1);
span.appendChild(document.createTextNode(":" + value));
// span.style.marginLeft = "5%";
span.setAttribute("class", "btnCom");
span.setAttribute("id", "xyz-" + hfCommentId);
span.setAttribute("data-fileid", hfCommentId);
span.setAttribute("data-hfid", hfCommentId);
span.setAttribute("dataid", id);
//组装p
var p = document.createElement("p");
var pstyle = "background-color:#F1F1F1;width:90%;margin:auto;font-size:15px;";
p.setAttribute("style", pstyle);
p.appendChild(span);
var comid = document.getElementById(divCommentId);
//追加节点
comid.appendChild(p);
layer.closeAll();
}
}
});
});
});
成品图：
有不懂的可以问我，我会尽可能答疑。
原创不易，看完记得点赞收藏噢~
--END--
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
