大致功能描述：
1、滑屏，添加自定义滚动条
2、上拉加载
3、大图预览
图片预览（左边是为加载中的相册集，中间一个是加载完成的相册，一个是当我们拉到底部的时候会有加载更多的提示，右侧是大图预览的图片，不确定能不能上传成功，之前不能，试一试喽）
实现过程，我在代码中注释了，个人认为注释还是很详细的，如果有什么疑问，欢迎留言提问哦！
嗯，然后直接上代码喽！
注意：在使用前，还是先要引入我之前封装好的函数，链接：MTween、mScroll、setGesture,引入的时候，MTeen一定要放在前面哦！
css代码没有提供，如果有需要的可以留言
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title>图片上滑加载图片</title>
<link rel="stylesheet" href="loadingPig.css"/>
<script type="text/javascript">
(function(){
//移动端的适配，根据屏幕大小的变化而不断的变化
setRem();
window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
function setRem(){
var html = document.documentElement;
var width = html.clientWidth;
html.style.fontSize = width/16+'px';
}
})()
document.addEventListener('touchstart', function(e) {
e.preventDefault();
});
</script>
</head>
<body>
<header>
萌萌哒相册集
</header>
<div id="box">
<div id="inner">
<header>下拉刷新</header>
<ul id="list">
</ul>
<footer>加载更多</footer>
</div>
</div>
<section id="imgPage">
<header>大图预览
<a id="backBtn" href="#">
>
</a>
</header>
<div class="imgWrap">
<img src="pics/1.jpg" id="bigImg" />
<nav id="imgNavs">
<a href="javascript:;">向左旋转90</a>
<a href="javascript:;">向右旋转90</a>
<a href="javascript:;">放大</a>
<a href="javascript:;">缩小</a>
</nav>
</div>
</section>
<script src="js/m.Tween.js"></script>
<script src="js/myScroll.js"></script>
<script src="js/setGesture.js"></script>
<script>
(function(){
var box = document.querySelector("#box");
var inner = document.querySelector("#inner");
var footer = document.querySelector("footer");
var oList = document.querySelector("#list");
var lis = oList.children;
var dataImg = [];
var length = 12;//每次加载12条数据
var start = 0;
var isEnd = false;
for(var i=0; i<52; i++){//生成的数据，在实际工作中，应该从后端获取该部分
dataImg.push(`pics/${i%26+1}.jpg`);
}
setBigImg();
setScroll();
createLi();
//请求数据，加载li
function createLi(){
if(start >= dataImg.length){
//alert("对不起没有更多图片了");
footer.innerHTML = "对不起没有更多图片了";
setTimeout(function(){
footer.style.opacity = 0;
MTween({
el:inner,
target:{
translateY:box.clientHeight -inner.offsetHeight
},
time:300,
type:"easeBoth"
});
},1000);
return;
}
var end = start+length;
end = (end>=dataImg.length)?dataImg.length:end;//判断数据是否加载完毕
for(var i=start; i<end; i++){
var li = document.createElement('li');
li.src = dataImg[i];//为li添加自定义属性src，保存对应的图片地址
li.isLoad = true;
//手指点击图片的时候可以进入大图预览
li.addEventListener("touchstart",function(e){
this.isMove = false;//为li添加自定义属性isMove,是为了判断我们是要进入大图预览还是在滑屏
// 防止我们在滑屏的时候误触图片而进入大图预览，影响用户体验
});
li.addEventListener("touchmove",function(e){
this.isMove = true;//如果手指抬起前，手指进行了move，说明我们是在滑屏，而不是想要进入大图预览
});
li.addEventListener("touchend",function(e){
if(this.isMove){
return;//如果我们是在滑屏，那么手指抬起的时候，就不进入大图预览，否则执行下面的代码（进入大图预览）
}
css(bigImg,"scale",100);
css(bigImg,"rotate",0);
bigImg.src = this.children[0].src;//让大图的图片和我们点击的li里面的图片保持一致
css(imgPage,"scale",100);
});
oList.appendChild(li);
}
createImg();
footer.style.opacity = 0;
}
//判断是否该创建img
function createImg(){
var boxRect = box.getBoundingClientRect();
var bottom = boxRect.top+boxRect.height;
for(var i=start; i<lis.length; i++){
var top = lis[i].getBoundingClientRect().top;//li距离视窗的top值
if(top<bottom&&lis[i].isLoad){//如果li的top值小于视窗的大小的时候，说明该li进入了可视区
lis[i].isLoad = false;//让添加的自定义属性isLoad变为false，是为了防止因为li在可视区，
// 而不断的为其添加图片（限制只为每个li添加一张图片）
showImg(lis[i]);
}
}
}
//创建图片并显示
function showImg(li){
var img = new Image();
img.src = li.src;
img.onload = function(){
li.appendChild(img);
//元素没有渲染完成，transition不起作用
setTimeout(function(){//等待图片渲染完成之后，再让其透明度为1，这时候我们添加的transition才能起作用
img.style.opacity = 1;
},100);
}
}
function setScroll(){
mScroll({
el:box,
start:function(){
//手指按下时要执行的函数
var innerTop = Math.round(css(inner,"translateY"))-5;//结果为负值（-5是为了扩大条件，可以是你自己认为合适的数）
var minTop = box.clientHeight - inner.offsetHeight;//结果为负值
if(minTop>=innerTop){//说明用户是在底部进行拖拽的
footer.style.opacity = 1;
isEnd = true;
}else{
footer.style.opacity = 0;
isEnd = false;
}
},
move:function(){
createImg();//发生滚动的时候执行的函数,判断是否创建图片
},
end:function(){
//手指抬起时执行的函数
var innerTop = Math.round(css(inner,"translateY"))-5;//结果为负值（-5是为了扩大条件，可以是你自己认为合适的数）
var minTop = box.clientHeight - inner.offsetHeight;//结果为负值
if(isEnd&&minTop>=innerTop){//两个判断，第一个判断是否是在底部进行的滑屏操作，第二个判断是上拉还是下滑（上拉才执行下面的操作）
clearInterval(inner.timer);//清除定时器，阻止滑屏中的回弹动画
//如果有数据的话继续创建li
start += length;
createLi();
document.querySelector('#scrollBar').style.opacity = 0;
isEnd = false;
}
},
over:function(){}
});
}
})()
//下面是为大图预览添加动画效果
function setBigImg(){
var imgPage = document.querySelector("#imgPage");
var bigImg = document.querySelector("#bigImg");
var navs = document.querySelectorAll("#imgNavs a");
var backBtn = document.querySelector("#backBtn");
backBtn.addEventListener('touchend',function(e){
css(imgPage,"scale",0);//当点击返回按钮的时候，让大图预览页缩小为0，其实就是返回啦
});
var startRotate = 0;
var startScale = 0;
var maxScale = 1.5;//限制最大的缩放倍数
var minScale = 0.5;//限制最小的缩放倍数
css(imgPage,"scale",0);
setGesture({//添加多手指操作，实现放大缩小以及旋转操作
el:bigImg,
start:function(e){
startRotate = css(this,"rotate");
startScale = css(this,"scale")/100;
},
change:function(e){
var scale = startScale*e.scale;
if(scale>maxScale){
scale = maxScale;
}else if(scale<minScale){
scale = minScale;
}
css(this,"rotate",startRotate+e.rotation);
css(this,"scale",scale*100);
},
end:function(){
var deg = css(this,"rotate");
deg = Math.round(deg/90);//当我们旋转图片的时候，如果没有旋转到90deg的倍数时，
// 我们对其进行处理让其旋转到理他最近的90deg的倍数的位置上，用户体验会更好吧（下面的同理）
deg = deg*90;
MTween({
el:this,
target:{rotate:deg},
time:300,
type:"easeBoth"
});
}
});
//我们点击列表时，可以实现的操作
navs[0].addEventListener("touchend",function(){
var deg = css(bigImg,"rotate");
deg = Math.round(deg/90)-1;
deg = deg*90;
MTween({
el:bigImg,
target:{rotate:deg},
time:300,
type:"easeBoth"
});
});
navs[1].addEventListener("touchend",function(){
var deg = css(bigImg,"rotate");
deg = Math.round(deg/90)+1;
deg = deg*90;
MTween({
el:bigImg,
target:{rotate:deg},
time:300,
type:"easeBoth"
});
});
navs[2].addEventListener("touchend",function(){
var scale = css(bigImg,"scale")/100;
scale+=.1;
if(scale>maxScale){
scale = maxScale;
}
MTween({
el:bigImg,
target:{
scale:scale*100
},
time:300,
type:"easeBoth"
});
});
navs[3].addEventListener("touchend",function(){
var scale = css(bigImg,"scale")/100;
scale-=.1;
if(scale<minScale){
scale = minScale;
}
MTween({
el:bigImg,
target:{
scale:scale*100
},
time:300,
type:"easeBoth"
});
});
}
</script>
</body>
</html>
ok，完毕，还是那句话，大家有什么好的想法或者有什么问题都可以随时留言，互相学习，互相进步