点击加载更多

html代码

<div class="download">    
    <div class="one">    
        <span class="f20">测试资料</span>    
        <a href=""><span class="iconfont icon-xiazai"></span></a>    
    </div>    
</div>    
<div class="see_more" data-cateId="6" id="more" data-status="1">    
    <span class="f16">加载更多结果</span>    
</div>    
<input type="hidden" id="page" value="2">

javascript代码


$('.see_more').click(function () {    
var page = parseInt($("#page").val());    
$(this).html(`<span class="f16">加载中...</span>`);    
status = $(this).attr("data-status");    
if (status == 1) {    
status = $(this).attr("data-status", "0");    
$.ajax({    
type: "post",    
url: "/home/page/index.html",    
data: {    
type:"down",    
page: page,    
cateId: $(this).attr("data-cateId"),    
},    
dataType: "json",    
success: function (data) {    
if (data.data.length === 0) {    
$("#more").css("display", 'none');    
return false;    
}else {    
if (data.data.length < 2) {    
$("#more").css("display", 'none');    
} else {    
$("#page").val(page + 1);    
}    
insertDiv(data.data);    
}    
//insertDiv(data);    
}    
});    
}    
})    
function insertDiv (data) {    
var information = $(".download");    
var html = '';    
for (var i = 0; i < data.length; i++) {    
html = ` <div class="one">    
<span class="f20">` + data[i].title + `</span>    
<a href="` + data[i].file + `"><span class="iconfont icon-xiazai"></span></a>    
</div>`;    
}    
information.append(html);    
$("#more").html(`<span class="f16">加载中...</span>`);    
$("#more").attr("data-status", "1");    
}

css样式

.download .one {
    height: 104px;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 25px 0 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
    transition: all .5s;
}

.download .one .f20 {
    transition: all .5s;
    width: 85%;
}

.download .iconfont {
    width: 46px;
    height: 46px;
    background: #00689B;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    color: #fff;
    transition: all .5s;
}

.download .one:hover {
    background-color: #00689B;
    transition: all .5s;
}

.download .one:hover .f20 {
    color: #fff;
    transition: all .5s;
}

.download .one:hover .iconfont {
    background-color: #fff;
    color: #00689B;
    transition: all .5s;
}

.see_more {
    background-color: #00689B;
    height: 67px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.see_more .f16 {
    color: #fff;
}

效果图