ajax鼠标滚动到网页底部实现局部刷新~瀑布流
来源：互联网 发布：矩阵测光模式 编辑：程序博客网 时间：2024/04/27 21:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="base.css" />
<script src="ourAjax.js"></script>
<script>
window.onload = function(){
var cols = document.querySelectorAll(".col");//选择器dom操作方法 //通过选择器拿到对应标签
document.body.onscroll=document.documentElement.onscroll = function(){//特殊的兼容写法，兼容滚动高度
ajax({
method:"get",
url:"data.json",//通过地址直接请求数据
success:function(data){ //数据请求成功之后执行的处理程序
var obj = JSON.parse(data); //将请求得到的json格式的数据转化为可以使用的json对象
//console.log(obj);
//当前浏览器的高度
var cHeight = document.documentElement.clientHeight;
//滚动条距离顶部的距离
var sTop = document.body.scrollTop||document.documentElement.scrollTop;
//文档的高度
var pHeight = document.body.scrollHeight;
document.title = cHeight;
//alert(1)
var flag = cHeight + sTop==pHeight;//滚动条距离顶部的距离+当前浏览器的高度==文档的高度为真
if(flag){
addImg(obj.datas);添加图片
}
},
error:function(mes){
//console.log(mes)
}
})
}
function addImg(arr){
for(var i = 0;i<arr.length;i++){
var box = document.createElement("div");
box.className = "box";
box.innerHTML = '<img src="images/'+arr[i]+'" />';
var col = getMinHeight(cols);
col.appendChild(box);
}
}
/*
高度最小的列dom对象
*/
function getMinHeight(cols){
var min = cols[0]; //高度最小的列dom对象
for(var i = 0;i<cols.length;i++){
if(min.offsetHeight>cols[i].offsetHeight){
min = cols[i];
}
}
return min;
}
}
</script>
</head>
<body>
<div id="container">
<div class="col">
<div class="box">
<img src="images/0.jpg" />
</div>
<div class="box">
<img src="images/4.jpg" />
</div>
<div class="box">
<img src="images/5.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/1.jpg" />
</div>
<div class="box">
<img src="images/4.jpg" />
</div>
<div class="box">
<img src="images/6.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/2.jpg" />
</div>
<div class="box">
<img src="images/0.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/3.jpg" />
</div>
<div class="box">
<img src="images/8.jpg" />
</div>
<div class="box">
<img src="images/9.jpg" />
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="base.css" />
<script src="ourAjax.js"></script>
<script>
window.onload = function(){
var cols = document.querySelectorAll(".col");//选择器dom操作方法 //通过选择器拿到对应标签
document.body.onscroll=document.documentElement.onscroll = function(){//特殊的兼容写法，兼容滚动高度
ajax({
method:"get",
url:"data.json",//通过地址直接请求数据
success:function(data){ //数据请求成功之后执行的处理程序
var obj = JSON.parse(data); //将请求得到的json格式的数据转化为可以使用的json对象
//console.log(obj);
//当前浏览器的高度
var cHeight = document.documentElement.clientHeight;
//滚动条距离顶部的距离
var sTop = document.body.scrollTop||document.documentElement.scrollTop;
//文档的高度
var pHeight = document.body.scrollHeight;
document.title = cHeight;
//alert(1)
var flag = cHeight + sTop==pHeight;//滚动条距离顶部的距离+当前浏览器的高度==文档的高度为真
if(flag){
addImg(obj.datas);添加图片
}
},
error:function(mes){
//console.log(mes)
}
})
}
function addImg(arr){
for(var i = 0;i<arr.length;i++){
var box = document.createElement("div");
box.className = "box";
box.innerHTML = '<img src="images/'+arr[i]+'" />';
var col = getMinHeight(cols);
col.appendChild(box);
}
}
/*
高度最小的列dom对象
*/
function getMinHeight(cols){
var min = cols[0]; //高度最小的列dom对象
for(var i = 0;i<cols.length;i++){
if(min.offsetHeight>cols[i].offsetHeight){
min = cols[i];
}
}
return min;
}
}
</script>
</head>
<body>
<div id="container">
<div class="col">
<div class="box">
<img src="images/0.jpg" />
</div>
<div class="box">
<img src="images/4.jpg" />
</div>
<div class="box">
<img src="images/5.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/1.jpg" />
</div>
<div class="box">
<img src="images/4.jpg" />
</div>
<div class="box">
<img src="images/6.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/2.jpg" />
</div>
<div class="box">
<img src="images/0.jpg" />
</div>
</div>
<div class="col">
<div class="box">
<img src="images/3.jpg" />
</div>
<div class="box">
<img src="images/8.jpg" />
</div>
<div class="box">
<img src="images/9.jpg" />
</div>
</div>
</div>
</body>
</html>
0 0
- ajax鼠标滚动到网页底部实现局部刷新~瀑布流
- php+jquery+ajax滚动条滚动到底部自动加载，简单实现瀑布流
- ajax实现网页的局部刷新
- Masonry + Ajax 实现无限刷新瀑布流
- JavaScript瀑布流的实现以及底部刷新
- JavaScript瀑布流的实现以及底部刷新
- $.ajax 实现局部刷新
- Ajax实现局部刷新
- Ajax实现局部刷新
- Ajax实现局部刷新
- Ajax实现局部刷新
- AJAX实现局部刷新
- AJAX实现局部刷新
- AJAx实现局部刷新
- thinkphp+ajax 移动端实现滚动到底部加载数据(无刷新动态加载数据技术的应用)
- 使用AJAX技术实现网页无闪自动局部刷新
- 使用AJAX技术实现网页无闪自动局部刷新
- 使用AJAX技术实现网页无闪自动局部刷新
- android(base)面试题
- hibernate多表联合查询
- Codeforces Round #360 (Div. 2)
- Read N Characters Given Read4 II - Call multiple times
- Hadoop集群化搭建（三）配置SSH互信
- ajax鼠标滚动到网页底部实现局部刷新~瀑布流
- javascript 日期对象、Math对象、字符串对象的方法使用练习：
- How to find SDK Embedded Drivers
- 认识黑客常用的入侵方法
- php绘制验证码
- hibernate 在线查询
- linux shell 流程控制
- Pull解析Xml
- 冒泡排序java
