实现拖拽版本：上下添加橡皮筋，有回弹效果 首次根据屏幕区域的大小 添加8张图片；
布局样式：
<body>
<header id='header'>三国女将</header><div id="wrap">
<div class='content'>
<!--//ul图片-->
<ul class='list'>
</ul>
</div>
</div>
</body>
js实现功能：
//首先准备工作：1.rem适配 2.取消默认行为 3.禁止系统滚动条事件 4.meta 完美视口
<script type="text/javascript" src="js/transformCss.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript">
//取消默认行为
document.addEventListener('touchstart',function(e){
e.preventDefault();
});
//rem适配
(function(){
var width=document.documentElement.clientWidth;
var styleNode=document.createElement('style');
styleNode.innerHTML='html{font-size:'+width/16+'px; }';
document.head.appendChild(styleNode);
})();
//获取元素
//获取ul
var list=document.querySelector('#wrap .content .list');
var header=document.getElementById('header');
var wrap=document.getElementById('wrap');
//存放图片数组
var arr=[];
for(var i=0;i<100;i++){
var s='img/'+(i%18+1)+'.jpg';
arr.push(s);
}
//每次开始加载的个数
var start=0;
var length=12;
//创建li
createLi();
function createLi(){
var end=start+length;
console.log(end)
//创建li
for(var i=start;i<length;i++){
var li=document.createElement('li');
li.src=arr[i];
//刚开始的时候是没有图片的
li.isLoad=false;
list.appendChild(li)
}
start=end;
lazyLoad();
}
//懒加载
function lazyLoad(){
var minH=header.offsetHeight;
var maxH=document.documentElement.clientHeight;
var liNodes=document.querySelectorAll('#wrap .content .list li');
//判断每个li距离顶部的距离， getBoundingClientRect()相对的是视口0,0的位置
for(var i=0;i<liNodes.length;i++){
var litop=liNodes[i].getBoundingClientRect().top;
//判断懒加载条件
if(!liNodes[i].isLoad &&litop<maxH&&litop>minH){
createImg(liNodes[i]);
liNodes[i].isLoad=true;
}
}
};
//创建图片函数
function createImg(li){
var img=new Image();
img.src=li.src;
img.οnlοad=function(){
img.style.opacity=1;
}
li.appendChild(img);
}
//拖动逻辑
var callback={
move:function(){
lazyLoad();
}
}
dragNav(wrap,callback); //此处dragNav方法是调用的引入的js文件里的方法；
js引入文件：
drag.js 主要实现拖动等功能；
transformCss.js 主要是读取和写入元素的效果
(如有需要可联系私发，就不提供在上面了)
3593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
