瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)

最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生demo，分享给大家...

简单分为三个文档，有详细的注释：img；ajax.php；demo.php

其中img文件夹中放入图片 1.jpg；2.jpg;3.jpg....

ajax.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页面

瀑布流

li{

list-style: none;

float: left;

margin:4px;

}

img{

border:4px solid black;

}

//找对象

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 = '';

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)

}

以上这篇原生ajax瀑布流demo分享(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

时间： 2017-05-15

瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)相关推荐

对象流java_Java中的对象流总结(必看篇)
java中可以通过对象流将一个序列化的对象保存到硬盘中,或者硬盘中读取一个对象.对象流的存储和读取包含以下几点内容: 1.所保存的对象必须实现serializable接口. 2. 所保存的对象的属性也 ...
linux tomcat部署php项目,linux修改tomcat默认访问项目的具体步骤(必看篇)
tomcat服务器的默认访问路径是webapps目录下的ROOT.如果更改tomcat服务器下的默认访问工程,需要修改tomcat/conf/server.xml配置文件. 打开server.xml可 ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
原生ajax如何执行,原生ajax调用数据实例讲解
由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的aja ...
.ajax get 写法,原生Ajax写法（GET）
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
原生ajax传值php,原生ajax上传图片，php后台处理总结
原生ajax上传图片,php后台处理总结这篇文章发布于 2018/10/03,归类于后端数据库等标签: 原生ajax上传图片,php后台处理图片上传开始做图片上传,发现之前的处理方式基本忘光了 ...
ajax基础知识必看篇(黄梦岚)
1: 什么是Ajax? Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式.快速动态网页应 ...
Ajax工作流程(原生Ajax)
Ajax通过XMLHttpRequest对象实现异步方式在后台发送发送请求. 主要有以下四个步骤: (1)初始化XMLHttpRequest对象.不同浏览器的差异,需要我们创建一个跨浏览器的对象,并判 ...
原生php ajax post_使用原生ajax发送post请求完整案例
搜索热词使用ajax发送数据实现前后台的交互,我想是web开发最基础的技能了.近来dz开发因为不兼容jquery,所以只能使用原生js发送数据,不想还遇到很多问题.在这里分析总结一下.先来一个使用a ...

瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)

瀑布流ajax思路步骤,原生ajax瀑布流demo分享(必看篇)相关推荐

最新文章

热门文章