最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生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的更多相关文章

  1. ajax 瀑布流 demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 比较容易理解的---原生js瀑布流

    最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...

  3. Ajax——瀑布流

    基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...

  4. Hawk 3.1 动态页面,ajax,瀑布流

    不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...

  5. ajax 瀑布流实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery ajax瀑布流加载静态的列表页面

    1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...

  7. 原生js瀑布流

    HTML部分代码............................... CSS部分代码........................... 原生js部分代码................. ...

  8. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  9. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

随机推荐

  1. sklearn有关参数

    from sklearn import datasets from sklearn.linear_model import LinearRegression import matplotlib.pyp ...

  2. 301ReidrectPages中重复记录导致的500 server error

    在Umbraco平台开发一个系统时,遇到一个问题,报错500 server error, system is currently unable to handle this request. 按下F1 ...

  3. HDU 5236 Article (概率DP+贪心)

    题意:要求输入一篇N个字符的文章,对所有非负整数i:每到第i+0.1秒时可以输入一个文章字符,每到第i+0.9秒时有P的概率崩溃(回到开头或者上一个存盘点) 每到第i秒有一次机会可以选择按下X个键存盘 ...

  4. Sharepoint2013商务智能学习笔记之Performancepoint service 配置(九)

    1)配置Performance Service服务 第一步,新建performance service.先在管理中心,系统设置区域点击管理服务器上的服务,确认Performance Service服务 ...

  5. Ubuntu使用技巧

    命令 获取系统安装包的编译源码及脚本 apt-get source package 查询端口被占用的进程 lsof -i:端口号 配置 配置阿里源 # mv /etc/apt/source.list ...

  6. Educational Codeforces Round 52E(构造,快速幂)

    #include <bits/stdc++.h>using namespace std;const int mod=998244353;long long b[200007];long l ...

  7. JVM调试过程

    一.查看系统情况 Linux查看CPU和内存使用情况 二.查看JVM启动参数 2.1 jcmd JVM诊断之查看运行参数

  8. 将图片至于jsp页面上(层)

    <div style="position: relative"> <span style="position: relative; top: 1px; ...

  9. 求第 i 个素数 Meissel Lehmer Algorithm + 二分 【模板】

    1473: L先生与质数V3 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 1348  Solved: 147 [Submit][Status][Web ...

  10. Exadata中Infiniband交换机升级

    Infiniband交换机的软件补丁包,随着软件版本的不同,其发布方式也有所变化,从如下图表可以看出,1.3.3-2这个版本是一个分水岭,这个版本及以前的版本,补丁包是单独下载的,而之后的版本,inf ...