<!DOCTYPE html>
|
<html lang="zh">
|
<head>
|
<th:block th:include="include :: header('文章模板列表')" />
|
</head>
|
<body class="gray-bg">
|
<div id="main" class="wrapper wrapper-content animated fadeInRight">
|
<div class="row">
|
<div id="c1" class="col-sm-4">
|
|
|
</div>
|
<div id="c2" class="col-sm-4">
|
|
</div>
|
<div id="c3" class="col-sm-4">
|
|
</div>
|
</div>
|
</div>
|
<th:block th:include="include :: footer" />
|
|
<script type="text/javascript">
|
var prefix = ctx + "cms/articleTemplate";
|
var pageNum=1;
|
var url = prefix + "/list";
|
var totalPages;
|
function selectMinColumn(){
|
var h1=$("#c1").height();
|
var h2=$("#c2").height();
|
var h3=$("#c3").height();
|
var arr=[];
|
arr.push(h1);
|
arr.push(h2);
|
arr.push(h3);
|
var minData= arr[0];
|
var index=0;
|
for (var i = 0; i < arr.length; i++) {
|
if (arr[i]<minData) {
|
minData = arr[i]; // 最小值
|
index=i;
|
}
|
}
|
return "c"+(index+1);//返回高度最小的元素id
|
|
}
|
function initList(){
|
$.ajax({
|
url: url+"?pageNum="+pageNum,
|
type: "post",
|
dataType: "json",
|
data: null,
|
success: function(json) {
|
if(json.code!=0&&json.code!='0'){
|
$.modal.alertWarning(json.msg);
|
}else{
|
totalPages=(json.total+9)/10;
|
var data=json.rows;
|
$.each(data,function(i,v){
|
var html="";
|
html+=" <div class=\"ibox\">" +
|
" <div class=\"ibox-title\">" ;
|
if(v.hotFalg==1){
|
html+= " <span class=\"label label-danger pull-right\">HOT</span>" ;
|
}else if(v.newFlag==1){
|
html+= " <span class=\"label label-primary pull-right\">NEW</span>" ;
|
}else{
|
html+= " <span class=\"label label-primary pull-right\"></span>" ;
|
}
|
|
html+= " <h5>"+v["name"]+"</h5>" +
|
" </div>" +
|
" <div style='padding: 8px 20px 20px 20px;' class=\"ibox-content\">" +
|
" <h4>效果预览:</h4>" +
|
" <p>" +v["content"]+"</p>" +
|
" <div style=' border-top: 1px solid #ddd; padding-top: 20px;' class=\"row m-t-sm\">" +
|
" <div class=\"col-sm-6\">" +
|
" 作者：<div style=\"display: inline-block\" class=\"font-bold\">markbro</div>" +
|
" </div>" +
|
" <div class=\"col-sm-6 text-right\">" +
|
" 日期：<div style=\"display: inline-block\" class=\"font-bold\">2019年12月31日</div>" +
|
" </div>" +
|
" </div>" +
|
" </div>" +
|
" </div>";
|
|
var id=selectMinColumn();
|
$("#"+id).append(html);
|
});
|
}
|
}
|
});
|
}
|
$(function(){
|
initList();
|
//alert(selectMinColumn());
|
$(window).scroll(
|
|
function() {
|
var scrollTop = $(this).scrollTop();
|
var scrollHeight = $(document).height();
|
var windowHeight = $(this).height();
|
if (scrollTop + windowHeight == scrollHeight) {
|
pageNum++;
|
if(pageNum>totalPages){
|
layer.msg("已经加载了全部数据!");
|
}else{
|
initList();
|
}
|
|
}
|
});
|
})
|
</script>
|
</body>
|
</html>
|
