最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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. call apply bind 的区别

    1.call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以 var xw={ name: "小王", gender: &q ...

  2. Win10 上 安装Arduino 驱动 和 Arduino IDE 1.6.9

    Win10 安装Arduino IDE软件 和 驱动 在Win10 上安装最新的Arduino IDE (1.6.9安装包)很简单,并且不行要手动安装Arduino板子的驱动,整个安装过程都当前的简单 ...

  3. window 删除文件提示指定的文件名无效或太长

    方法0: 使用 chkdsk 磁盘修复工具 .单击“开始”,点击“运行”,输入cmd并回车打开命令提示符窗口: .在此窗口输入以下命令: 例如:检查并修复D分区 chkdsk D: /f 回车,输入 ...

  4. Entity Framework Code-First（9.9）：DataAnnotations - ForeignKey Attribute

    DataAnnotations - ForeignKey Attribute: ForeignKey attribute can be applied to properties of a class ...

  5. Spring入门第二十七课

    声明式事务 直接上代码: db.properties jdbc.user=root jdbc.password=logan123 jdbc.driverClass=com.mysql.jdbc.Dri ...

  6. 【Qt官方例程学习笔记】Address Book Example（代理模型）

    地址簿示例展示了如何使用代理模型在单个模型的数据上显示不同的视图. 本例提供了一个地址簿,允许按字母顺序将联系人分组为9组:ABC.DEF.GHI.…,VW,…XYZ.这是通过在同一个模型上使用多个视 ...

  7. java线程基础知识----线程与锁

    我们上一章已经谈到java线程的基础知识,我们学习了Thread的基础知识,今天我们开始学习java线程和锁. 1. 首先我们应该了解一下Object类的一些性质以其方法,首先我们知道Object类的 ...

  8. .net core webapi +ddd(领域驱动)+nlog配置+swagger配置 学习笔记（2）

    DDD领域驱动模型设计 什么是DDD 软件开发不是一蹴而就的事情,我们不可能在不了解产品(或行业领域)的前提下进行软件开发,在开发前,通常需要进行大量的业务知识梳理,而后到达软件设计的层面,最后才是开 ...

  9. C#面向对象三大特性之三：多态

    比起前面的封装和继承,多态这个概念不是那么好理解.我们还是从一个事例开始: 公司最近为了陶冶情操,养了几种动物(Animal),有猫(Cat).狗(Dog).羊(Sheep),这些动物都有共同的特性, ...

  10. Unable to round-trip http request to upstream: EOF问题

    Unable to round-trip http request to upstream: EOF, 今天我用的phpstudy环境中的网站页面忽然打不开了,报错“Unable to round-t ...