分享一段瀑布流加載替換分頁查詢的代碼
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<!--<head th:include="include :: header"></head>-->
<head>
<meta charset="utf-8">
<title>回憶錄相冊</title>
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/bootstrap-4.4.1/dist/css/bootstrap.css"/>
<!-- <script src="/bootstrap-4.4.1/dist/js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>-->
<script src="/bootstrap-4.4.1/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<style type="text/css">
.nav {
height: 60px;
/* border: 1px solid red; */
}
.body {
height: 600px;
border-bottom: 1px solid skyblue;
}
.c_left {
border-right: 1px solid red;
}
.img-thumbnail {
width: 160px;
}
.figure > img {
height: 100px;
width: 300px;
}
.mark_selection .mark_selection_title_el_tag .mark_selection_box_el_tag {
color: #267dcc;
background: rgba(38, 125, 204, .05);
}
.mark_selection .mark_selection_box_el_tag {
background: rgba(38, 125, 204, .05);
border-radius: 4px;
border: 1px solid rgba(38, 125, 204, .2);
height: 28px;
font-size: 14px;
line-height: 28px;
margin-right: 8px;
padding: 0 8px;
background-color: #fff;
}
.el-tag {
background-color: #ebf5fd;
border-color: #d6ebfb;
display: inline-block;
height: 32px;
padding: 0 10px;
line-height: 30px;
font-size: 12px;
color: #3399ea;
border-width: 1px;
border-style: solid;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
}
.fa {
margin: 5px;
padding: 5px;
/*cursor:pointer;*/
font-size: 15px;
width: 25px;
border-radius: 3px;
}
.fas:hover {
background-color: #1d9d74;
color: #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row nav">
<!-- 每一頁三十張照片.-->
<input type="hidden" id="page" value="0">
<input type="hidden" id="total" value="30">
<input type="hidden" id="ageinPage" value="0">
<input type="hidden" id="ageiTotal" value="30">
<div class="col-md-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/student/p7Memories/public/index">首頁/回憶錄</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
<div class="row body">
<div class="col-md-9 c_left" id="memories">
</div>
<input type="hidden" id="mType">
<div class="col-md-3 c_right">
<img th:src="${memories_log_file}" alt="..."
width="300px" height="300px">
<div id="memoriesType"></div>
<div id="labels"></div>
</div>
</div>
<input id="flag" type="hidden" value="0">
<input id="userId" type="hidden">
<input id="deptId" type="hidden" value="">
<input id="label" type="hidden" value="">
<!-- <div class="row footer">-->
<!-- <div class="col-md-12">-->
<!-- 底部標籤-->
<!-- </div>-->
<!-- </div>-->
</div>
<!--<div th:include="include :: footer"></div>-->
</body>
<script>
//瀑布流加載
$(window).scroll(function () {
var scrollerh = $(document).scrollTop();
var viewbody = $(window).height();
var allbody = $(document).height();
if (scrollerh + viewbody > allbody - 300) {
query(null);
}
})
$(function () {
query('1');
})
/**
* 默認查詢每個人一張 頭像
*/
function query(label) {
//獲取分頁數
var limit = Number($('#page').val());
if (limit > $('#total').val() ) {
return;
}
$.ajaxSettings.async = false;
$.getJSON('/student/p7Memories/public/query', {
limit: 30,
offset: limit
},
function (datas) {
if (label != null) {
$('#memories').html("");
}
$('#total').val(datas.total);
//記錄總數
var data = datas.rows;
//記次
var j = 0;
var html = '';
for (var i = 0; i < data.length; i++) {
//加載數據
if (j == 0) {
html += " <div class='row'>";
}
j++;
html += "<div class='col-md-2' onclick='againQuery(" + data[i].user_id + ")'>"
html += "<figure class='figure'>";
html += "<img src='" + data[i].url + "'";
html += "class='figure-img img-fluid rounded' alt='...'>";
html += "<figcaption class='figure-caption text-center'>" + data[i].deptName + ":" + data[i].name + "</figcaption>";
html += " </figure>";
html += "</div>";
if (j == 6) {
html += "</div>";
$('#memories').append(html);
j = 0;
html = '';
}
}
if (j > 0 && j < 6) {
$('#memories').append(html);
}
})
//每次加載30條數據
$('#page').val(Number($('#page').val()) + 30);
}
</script>
</html>
有問題歡迎留言或者聯繫q:1559810637
