原生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 ...
随机推荐
- wpf label下划线不显示的问题
突然发现label设置content的值为字符串时,如果字符串中包含_的话,在展示出来时下划线就不见了,百度了一下,发现了问题根源,说的label的ContentPresenter默认将下划线处理成快 ...
- java连接sqlserver2005数据库
java连接sqlserver2005数据库 首先得下载驱动程序到微软网站下载Microsoft JDBC Driver 4.0 for SQL Server 下载地址 :http://msdn. ...
- win7 64位安装nokia 920驱动
折腾了很长时间,终于安装成功,先将一些步骤记下来,此方法适用于哪些网上常规方法无法安装驱动的: 需要注意920不要连到电脑上的USB3.0接口,相关文件下载地址:http://pan.baidu.co ...
- HN669打包工具--调试文档
调试有两种方式,一是直接在游戏工程上面调试,这比较麻烦,需要根据插件配置文件和脚本文件去配置好工程选项后,才能调试.简单一点就是通过脚本文件打包后会有生成游戏工程对应每个渠道的工程. 如下图:这个工程 ...
- hdu3887 Counting Offspring
Counting Offspring HDU - 3887 问你对于每个节点,它的子树上标号比它小的点有多少个 /* 子树的问题,dfs序可以很轻松的解决,因为点在它的子树上,所以在线段树中,必定在它 ...
- 洛谷P1962 斐波那契数列
传送门 不难得到状态转移矩阵 然后带进去乱搞 //minamoto #include<iostream> #include<cstdio> #include<cstrin ...
- WebAPI学习及Swagger使用
本文用来保存自己学习WebAPI和Swagger使用过程中参考的文章,以及对WebAPI的初步了解. 1.RESTful风格 WebAPI只支持Http协议: 1.1.WebAPI与MVC的区别 Va ...
- 【常见Web应用安全问题】
Web应用程序的安全性问题依其存在的形势划分,种类繁多,这里不准备介绍所有的,只介绍常见的一些. 常见Web应用安全问题安全性问题的列表: 1.跨站脚本攻击(CSS or XSS, Cross Sit ...
- Django反向解析与分组命名
1.图书管理系统中使用分组或命名分组.URL的命名和反向解析: 2.删除功能三合一: urls.py文件 from app_book import views urlpatterns = [ url( ...
- git 处理 crlf rf
假如你正在 Windows 上写程序,又或者你正在和其他人合作,他们在 Windows 上编程,而你却在其他系统上,在这些情况下,你可能会遇到行尾结束符问题.这是因为 Windows 使用回车和换行两 ...