预加载、延迟加载、瀑布流、拖拽
2016-12-03 本文已影响0人
前端_凯伦
1.预加载-图片：
自己偷偷地加载
预加载的原理
var img = new Image()
img.src = '';
//页面上放很多img，设置成隐藏
img.onload=function(){
//加载完成了
};
img.onerror = funciton(){
//加载出错了
}
例子：
<style>
#div1{
width:800px;
height: 50px;
background: #ccc;
position: relative;
}
#div2{
width: 1px;
height: 100%;
background: red;
position: absolute;
left: 0;
top:0;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var count = 1;
for(var i = 0; i < 77; i++){
var img = new Image();
//img.src = 'images/'+i+'.jpg';
img.src = 'http://www.zhinengshe.com/works/3525/img/'+i+'.jpg';
img.onload = function(){
count++;
var scale = count / 77;
oDiv2.style.width = oDiv1.offsetWidth * scale + 'px';
};
if(count == 77){
//alert('加载完了！');
}
}};
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
2.延迟加载
延迟加载：
obj.offsetTop < 可视区高度 + 滚动距离;
obj.offsetTop < document.documentElement.clientHeight +
(document.documentElement.scrollTop || document.body.scrollTop);
例子：
<style>
*{margin:0;padding:0;list-style:none;}
li{
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
margin:10px;
}
img{
width: 100%;
height:100%;
}
</style>
<script>
window.onresize = window.onscroll = window.onload = function(){
var aImg = document.getElementsByTagName('img');
for(var i = 0; i < aImg.length; i++){
//可视区高度
var clientHeight = document.documentElement.clientHeight;
//滚动距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(aImg[i].offsetTop < (clientHeight+scrollTop)){
//加载aImg[i]
//console.log(aImg[i].getAttribute('_src'));
aImg[i].src = aImg[i].getAttribute('_src');
}
}
};
</script>
</head>
<body>
<ul>
<li><img _src="img/b1.jpg" alt=""></li>
<li><img _src="img/b2.jpg" alt=""></li>
<li><img _src="img/b3.jpg" alt=""></li>
<li><img _src="img/b4.jpg" alt=""></li>
<li><img _src="img/b5.jpg" alt=""></li>
<li><img _src="img/b6.jpg" alt=""></li>
<li><img _src="img/b7.jpg" alt=""></li>
<li><img _src="img/b8.jpg" alt=""></li>
<li><img _src="img/b9.jpg" alt=""></li>
<li><img _src="img/b10.jpg" alt=""></li>
</ul>
</body>
3.瀑布流
瀑布流：
物体大小：
高度：
obj.offsetHeight
obj.scrollHeight
当内容高度大于盒模型高度时-->内容高度
当内容高度小于盒模型高度时-->盒模型高度
瀑布流求ul最短
var arr = [];
arr.push(1,3,9,2,100);
arr.push(div1,div2,div3..);
arr.push(小明,班长);
arr.sort(function(){
//默认只会比字符串 字典序
//想比数字，还是按字典序 n1,n2--> n1-n2
});
arr.sort(function(n1,n2){
return n1-n2;
});
arr.sort(function(人1，人2){
return 人1.身高-人2.身高;
});
arrUl = [ul1,ul2,ul3];
arrUL.sort(function(ULa,ULb){
return ULa.offsetHeight - ULb.offsetHeight;
});
例子：
<style>
*{margin:0;padding:0;list-style:none;}
ul{
width: 200px;
border:1px solid #000;
float:left;
margin:10px;
}
li{
width: 180px;
height: 200px;
background: red;
margin:10px;
}
</style>
<script>
function rnd(n,m){return parseInt(Math.random()*(m-n)) + n;}
window.onload = function(){
var aUl = document.getElementsByTagName('ul');
function createLI(){
var oLi = document.createElement('li');
oLi.style.height = rnd(100,500) + 'px';
oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
function createLI20(){
for(var i = 0; i < 20; i++){
var oLi = createLI();
var arrUl = [];
for(var j = 0; j<aUl.length; j++){
arrUl.push(aUl[j]);
}
arrUl.sort(function(n1,n2){
return n1.offsetHeight - n2.offsetHeight;
});
arrUl[0].appendChild(oLi)
}
}
//如果走到最后了，再弄20个li，加到页面上
createLI20();
//当整个页面的高度 > 可视区+滚动距离
//alert(document.documentElement.scrollHeight);
window.onscroll = function(){
//可视区高度
var clientH = document.documentElement.clientHeight;
//滚动距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//可视区底边
var clientBottom = clientH + scrollTop;
//页面内容高度
var pageHeight = document.documentElement.scrollHeight;
document.title = pageHeight + ',' + clientBottom;
if(pageHeight <= clientBottom){
alert(pageHeight + ',' + clientBottom);
createLI20();
}
};
};
</script>
</head>
<body>
<ul></ul>
<ul></ul>
<ul></ul>
</body>
4.拖拽
拖拽：
大象放冰箱：
1）打开冰箱门
2）把大象放进去
3）把门关上
拖拽：
1）鼠标按下
2）鼠标移动
3）鼠标松开
新事件：
按下： onmousedown
移动： onmousemove
松开： onmouseup
阻止默认行为：
return false;
兼容：chrome ff ie9+
针对低级浏览器：
事件捕获
obj.setCapture();
磁性吸附例子：
<style>
*{margin:0; padding:0;}
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
left:200px;
top:200px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if(l <= 100){
l = 0;
}
if (l >= (document.documentElement.clientWidth - oDiv.offsetWidth-100)){
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t <= 100){
t = 0;
}
if(t >= (document.documentElement.clientHeight - oDiv.offsetHeight-100)){
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
oDiv.releaseCapture && oDiv.releaseCapture();
};
oDiv.setCapture && oDiv.setCapture();
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
虚线框拖拽
<style>
*{margin:0; padding:0;}
#div1{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var border = 3;
oDiv.onmousedown = function(ev){
var oEvent = ev || event;
//创建一个虚线框 div 有边框
var newDiv = document.createElement('div');
newDiv.style.width = oDiv.offsetWidth - border*2 + 'px';
newDiv.style.height = oDiv.offsetHeight - border*2 + 'px';
newDiv.style.position = 'absolute';
newDiv.style.left = oDiv.offsetLeft + 'px';
newDiv.style.top = oDiv.offsetTop + 'px';
newDiv.style.border = border + 'px dashed red';
document.body.appendChild(newDiv);
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvent = ev || event;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY;
if(l <= 0){
l = 0;
}
if (l >= (document.documentElement.clientWidth - oDiv.offsetWidth)){
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(t <= 0){
t = 0;
}
if(t >= (document.documentElement.clientHeight - oDiv.offsetHeight)){
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
newDiv.style.left = l + 'px';
newDiv.style.top = t + 'px';
};
document.onmouseup = function(){
oDiv.style.left = newDiv.offsetLeft + 'px';
oDiv.style.top = newDiv.offsetTop + 'px';
document.body.removeChild(newDiv);
document.onmousemove = null;
document.onmouseup = null;
oDiv.releaseCapture && oDiv.releaseCapture();
};
oDiv.setCapture && oDiv.setCapture();
return false;
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
