最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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. mongodb 修改操作

    $addToSet与$each结合完成批量数组更新 db.text.update({_id:1000},{$addToSet:{books:{$each:["js","d ...

  2. push和commit的区别

    push和commit的区别 git作为支持分布式版本管理的工具,它管理的库(repository)分为本地库.远程库.git commit操作的是本地库,git push操作的是远程库. git c ...

  3. JavaScript高级程序设计学习笔记--面向对象的程序设计（二）-- 继承

    相关文章: 面向对象的程序设计(一) — 创建对象 http://www.cnblogs.com/blackwood/archive/2013/04/24/3039523.html 继承 继承是OO语 ...

  4. wpf listboxitem添加下划线

    1.通过List<string>进行赋值,没有字段绑定 // 前台xaml <ListBox x:Name="list1"> <ListBox.Ite ...

  5. 字符串中去除多余的空格保留一个(MS SQL Server)

    大约2年前,写过一篇<字符串中去除多余的空格保留一个(C#)>https://www.cnblogs.com/insus/p/7954151.html 今天,Insus.NET使用MS S ...

  6. node -- 安装及快速开始

    下载并安装 node下载地址:https://nodejs.org/en/download/ 安装就绪后,打开命令行,操作如下: shift+右键/Win+r->cmd 检测是否安装成功: no ...

  7. 机房重构——泛型和“DataTable”

    前言 我们都知道在机房重构的时候,大多数都在用七层进行重构,每一层都依赖实体.所以不管怎么调用,返回的应该是实体参数,这样才符合大多数的逻辑,这样我们试想一下,如果我们要求在U层返回多个实体值,怎么办 ...

  8. 2017-10-3 清北刷题冲刺班p.m

    a [问题描述]你是能看到第一题的 friends 呢.——hja给你一个只有小括号和中括号和大括号的括号序列,问该序列是否合法.[输入格式]一行一个括号序列.[输出格式]如果合法,输出 OK,否则输 ...

  9. 从技术 Leader 的招聘需求看，如何转岗为当前紧缺的大数据相关人才？

    前段时间,跟候选人聊天的时候,一个有多年工作经验的资深 iOS 工程师告诉我,他最近正在学习 Machine Learning 相关的知识.他觉得,对于程序员来说,技术进步大大超过世人的想象,如果你不 ...

  10. 运算符优先级 (JavaScript)

    运算符优先级描述了在计算表达式时执行运算的顺序.先执行具有较高优先级的运算,然后执行较低优先级的运算.例如,先执行相乘,再执行相加. JavaScript 运算符     下表列出了 JavaScri ...