原生ajax瀑布流demo
最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生demo，分享给大家...
简单分为三个文档，有详细的注释：img；ajax.php；demo.php
其中img文件夹中放入图片 1.jpg；2.jpg;3.jpg....
ajax.php页面
<?php
//模拟从数据库读取数据
$arr = array();
$op = opendir('./img'); //打开目录 //循环读取目录
while (($file = readdir($op)) !== false) {
//过滤点和点点
if ($file == '.' || $file == '..') {
continue;
}
$arr[] = $file;
}
closedir($op); //关闭目录
echo json_encode($arr);
demo.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
li{
list-style: none;
float: left;
margin:4px;
}
img{
border:4px solid black;
}
</style>
</head>
<body>
<ul id="ul">
<!-- <li><img src="./img/1.jpg" height="300" alt=""></li> -->
</ul>
</body>
<script>
//找对象
var ul = document.getElementById('ul'); //拿数据
function getData()
{
var ajax = new XMLHttpRequest();
ajax.open('get', 'ajax.php', true);
ajax.send();
ajax.onreadystatechange = function()
{
if (ajax.readyState == 4 && ajax.status == 200) {
var res = ajax.responseText;
//处理结果
var obj = JSON.parse(res);
for (var k in obj) {
// obj[k];
//创建节点
var li = document.createElement('li');
li.innerHTML = '<img src="./img/'+obj[k]+'" height="300" />';
ul.appendChild(li);
}
}
}
}
getData(); var timer;
//判断滚动条的高度，加载第二批文件
window.onscroll = function()
{
//获取三高
var zGao = document.documentElement.scrollHeight;//总高度
var lGao = document.documentElement.clientHeight;//浏览器可用高度
var gGao = document.body.scrollTop || document.documentElement.scrollTop;//滚出去的高度
// console.log(zGao, lGao, gGao); document.title = zGao + '_' + lGao + '_' + gGao; if (zGao - lGao - gGao < 500) {
clearTimeout(timer);
//用一次性定时器解决连续加载的问题
timer = setTimeout(function(){
getData();
}, 200)
}
}
</script>
</html>
欢迎大家留言，一起讨论。
欢迎大家关注我的 订阅号：博客乐园
原生ajax瀑布流demo的更多相关文章
- ajax 瀑布流 demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 比较容易理解的---原生js瀑布流
最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...
- Ajax——瀑布流
基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...
- Hawk 3.1 动态页面,ajax,瀑布流
不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...
- ajax 瀑布流实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery ajax瀑布流加载静态的列表页面
1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...
- 原生js瀑布流
HTML部分代码............................... CSS部分代码........................... 原生js部分代码................. ...
- js原生瀑布流
背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...
- iOS 瀑布流的Demo
/** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...
随机推荐
- HTML5新增的结构元素
HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...
- Hadoop Reducer个数设置
在默认情况下,一个MapReduce Job如果不设置Reducer的个数,那么Reducer的个数为1.具体,可以通过JobConf.setNumReduceTasks(int numOfReduc ...
- windows10 启用Linux子系统
转载 https://jingyan.baidu.com/article/e2284b2b99a327e2e6118d38.html 打开Windows下 设置--更新和安全--针对开发人员--选中“ ...
- C# 绘制图表（柱状图，线性图，饼状图）
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...
- ASP.NET MVC 小牛之旅1：何谓MVC
在学习ASP.NET MVC之前首先了解什么 是MVC ? MVC不是一种语言,严格来说也不算一个技术,而是开发时所使用的一种架构(框架),它就像是一种开发观念,或是一个设计样式. MVC让软件开发的 ...
- ProtoBuf练习（一）
基础数据类型 protobuf语言的基础字段类型相当于C++语言的基础类型 工程目录结构 $ ls proto/ TFixed.proto TInt.proto TScalar.proto TStr. ...
- ASP.NET控件之CompareValidator控件
作用:对Textbox或者其他输入框进行比较验证: 属性:ControlToValidate:要验证的控件: ErrorMessage:错误提示信息: ControlToCompare:与此相比的控件 ...
- 简单几步实现 IOS UITextField输入长度的控制
在ios开发过程中,我们有时候需要对UITextField的输入长度进行控制,比如输入手机号码最大长度为11位等,而ios自身又不像android那样可以设置输入框的输入长度,接下来通过简单几步实现这 ...
- UVA12230 过河 Crossing Rivers
题目描述 一个人每天需要从家去往公司,然后家与公司的道路是条直线,长度为 \(D\). 同时路上有 \(N\)条河,给出起点和宽度\(W_i\) , 过河需要乘坐速度为\(V_i\) 的渡船; 船在河 ...
- ELK系列(3) - Elasticsearch修改jvm参数
方法 Elasticsearch默认会配置1G的JVM堆的初始值和最大值,该jvm参数被配置在/config/jvm.options里: -Xms1g -Xmx1g 如果只是个人开发小项目,可以把参数 ...