springboot滚动分页展示列表（类似layui瀑布流效果）

背景：

公司项目要求获取用户关联的好友列表，要求分页查询，十条数据一页，滚动页面是点击加载更多，显示下一页列表。

​ 示例图：

实现：

本项目采用的前端模板是freemaker，主要前端页面代码（没有附css文件）如下：

<div class="middle-menu" style="margin: 0.3rem;">
				<div id="tab1" class="middle-menu1 " onclick="changeTab(1)">已添加好友</div>
				<div id="tab2" class="middle-menu2 " onclick="changeTab(2)">好友标签</div>
			</div>
				<div class="card-list-friend" id="noneToShow_1">
					<div class="feedback-box p-t-67">
						<img src="${mainDomain}/static/images/empty2.png" class="feedback-img" style="width: 3rem;" />
						<p class="feedback-text">暂无数据</p>
					</div>
				</div>
			<div class="card-list-friend" id="allCustShowDiv">
			</div>
			<div class="more-center-btn" id="allCustLoadMoreDiv" onclick="loadAllCustList();" style="display: none;">
				<i class="iconfont"></i><span>点击加载更多</span>
			</div>
            <div class="more-center-btn" id="allCustLoadRemark" style="display: none;">
				<i class="iconfont"></i><span>已显示全部好友</span>
			</div>
</div>

​ 显示效果如下：

​ js代码：

	// 全部好友页数
	var commonPage1 = 1;
	// 每页展示10个
	var pageSize = 10;

	//初始化
	$(function () {
       //进入页面就开始查询列表
	loadAllCustList();
	})

	//分页获取好友页表
	function loadAllCustList(){
			$.ajax({
				type: 'POST',
				url: '${mainDomain}/friend/myFriendList?page=' + commonPage1 + '&size=' + pageSize,
				dataType: 'json',
				success: function (res) {
					//获取数据
					if (res.success) {
						var resInfo = res.data.list;
						var count = res.data.count;

						var showHtml = '';

						if (count != 0 && resInfo.length != 0) {
							for (let item of resInfo) {
								showHtml += '' +
										'<div class="card">' +
										'<img src="${mainDomain}/static/images/person5.png" class="friend-avatar"/>' +
										'<div>' +
										'<div class="friend-name">微信昵称：' + item.followUserRemark +
										'</div>' +
										'<div class="friend-telephone">手机号：' + item.followUserRemarkMobiles +
										'</div>' +
										'</div>' +
										'</div>';
							}

                           				//隐藏默认的暂无数据页面
							$("#noneToShow_1").hide();
                            			//将查询的列表添加到页面上
							$("#allCustShowDiv").append(showHtml);
						}
						//显示加载更多标签
						$("#allCustLoadMoreDiv").show();

						//如果已经没有多余的，就将加载更多隐藏
						if (resInfo.length < pageSize || pageSize * commonPage1 >= count) {
							$("#allCustLoadMoreDiv").hide();
							if (resInfo.length != 0) {
								$("#allCustLoadRemark").show();
							}
						}

						//页码+1
						commonPage1++;

					} else {
						console.log("加载数据失败,请稍后再试");
					}
				},
				error: function (xhr, type) {
					console.log("加载数据异常,请稍后再试!");
				}
			});
	}

​ 后台代码： 接口需要自己写，略

​ 最终效果图：