<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<style type="text/css">
.page-scroll-container>div {
position: relative;
margin-bottom: 20px
}
.page-scroll-container a {
overflow: hidden;
display: block
}
.mask {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
text-align: center;
color: #ffffff
}
.mask h4 {
transform: translateY(10px);
opacity: 0.5;
transition-duration: 0.8s;
transition-delay: .2s;
margin-top: 28%;
font-size: 36px;
line-height: 42px
}
.page-scroll-container>div:hover .mask h4 {
opacity: 1;
transform: translateY(-10px)
}
.mask strong {
transform: translateY(10px);
opacity: 0.8;
transition-duration: 1s;
transition-delay: .3s;
display: block
}
.page-scroll-container>div:hover .mask strong {
transform: translateY(-10px);
opacity: 1;
transition-duration: opacity 1s
}
.mask span {
color: #fff;
transform: translateY(10px);
opacity: 0.5;
transition-duration: .8s;
transition-delay: .4s;
display: block;
font-size: 14px
}
.page-scroll-container>div:hover span {
opacity: 1;
transform: translateY(-10px)
}
.page-scroll-container>div:hover .mask {
opacity: 1;
filter: alpha(opacity=100);
transform: scale(1)
}
.page-scroll-container img {
width: 100%;
height: 100%;
transition: all .5s;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
overflow: hidden
}
.page-scroll-container a:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2)
}
.more {
width: 280px;
height: 55px;
line-height: 55px;
background: #d7000f;
margin: 20px auto 50px auto;
text-align: center;
border-radius: 26px
}
.more a {
color: #ffffff;
font-size: 18px
}
</style>
</head>
<body>
<div class="page-scroll-container row"></div>
<div class="more">
<a id="itemMore">查看更多造势案例+</a>
</div>
<script src="./js/jquery.min.js"></script>
<script>
(function ($, document) {
/*前端实现-懒加载插件pageScroll
* param el {object} jquery对象,默认： $('.page-scroll-container')
* param datas {array } 数据数组,格式：[{img:'',title:'',content:''},...],默认：示例
* param pageSize {number} 每页显示数量,默认： 6
* param currentPage {number} 当前页,默认： 0
* param addButton {object} jquery对象,默认： $('#itemMore')
* param bottom {number} 距底部距离,默认： 0
* param loadingTime {number} 加载时间,默认： 200ms
* */
$.pageScroll = function (option) {
option = option || {};
var defaultOption = {
el: $('.page-scroll-container'),
arr: option.datas || JSON.parse(('[' + new String(
',{"img":"img/index3_1.png","title":"Brand","content":"内容"}').repeat(20)
.substring(1) + ']')),
pagesize: option.pageSize || 6,
currentPage: option.currentPage || 0,
$loadText: option.addButton || $('#itemMore'),
loadTxt: {
more: '查看更多造势案例+',
loading: '<span>加载中...</span>',
end: '没有更多了'
},
bottom: option.bottom || 0,
loadingTime: option.loadingTime || 200,
isloading: false
};
Object.defineProperty(defaultOption, "page", {
get: function () {
if (option.page) {
return option.page
}
return this.arr.length % this.pagesize ? (parseInt(this.arr.length / this
.pagesize) + 1) : this.arr.length / this.pagesize;
}
});
defaultOption.toPage = function () {
var that = this;
if (!this.isloading) {
this.isloading = true;
var res = [];
for (var i = this.currentPage * this.pagesize, len = ((i + this.pagesize < this.arr
.length) ? i + this.pagesize : this.arr.length); i < len; i++) {
res.push(
'<div class="imgitem col-md-4 col-sm-4 col-xs-6" style="display:none;">'
);
res.push(' <a href="#">');
res.push(' <img src="' + this.arr[i].img + '" class="img-responsive">');
res.push(' <div class="mask">');
res.push(' <h4>' + this.arr[i].title + '</h4>');
res.push(' <strong>' + this.arr[i].content + '</strong>');
res.push(' <span class="qwe">查看该案例详情</span>');
res.push(' </div>');
res.push(' </a>');
res.push('</div>');
}
$(this.el).append(res.join(''));
$('.imgitem:not(:visible)').fadeIn(1500);
this.$loadText.html(this.loadTxt.more);
this.currentPage++;
setTimeout(function () {
that.isloading = false;
}, 1000);
}
};
defaultOption.init = function () {
var that = this;
this.toPage();
//点击展开更多
this.$loadText.on('click', function () {
if (that.currentPage < that.page) {
that.$loadText.html(that.loadTxt.loading);
setTimeout(function () {
that.toPage();
}, that.loadingTime);
} else {
that.$loadText.html(that.loadTxt.end);
}
that.toPage();
return false;
});
//页面滚动到距底部x距离时展开更多
$(window).on('scroll', function () {
var wHeight = $(window).innerHeight();
var dHeight = $(document).height();
var sHeight = $(document).scrollTop();
var bottomLength = dHeight - wHeight - sHeight;
if (bottomLength <= that.bottom) { //距底部高度
if (that.currentPage < that.page) {
that.$loadText.html(that.loadTxt.loading);
setTimeout(function () {
that.toPage();
}, that.loadingTime);
} else {
that.$loadText.html(that.loadTxt.end);
}
}
});
}
defaultOption.init();
return defaultOption;
}
})(jQuery, document);
//调用方式
$.pageScroll();
</script>
</body>
</html>
示例：请点这里
