最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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. Flask01 初识flask、创建flask应用、flask启动配置

    1 什么是flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 百度百科:点击前往 中文文档: ...

  2. HDFS内容追加

    配置:hdfs-site.xml <property> <name>dfs.support.append</name> <value>true</ ...

  3. Python最小二乘法解非线性超定方程组

    求解非线性超定方程组,网上搜到的大多是线性方程组的最小二乘解法,对于非线性方程组无济于事. 这里分享一种方法:SciPy库的scipy.optimize.leastsq函数. import numpy ...

  4. jQuery插件AjaxFileUpload可以实现ajax文件上传

    http://blog.sina.com.cn/s/blog_55e42da60100ocvh.html

  5. vue -- 项目调试

    方式1:vue-devtools插件 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率. 使用步骤 1. 到github下载:https: ...

  6. kylin cube 构建过程

    本文是对 http://kylin.apache.org/docs20/howto/howto_optimize_build.html的翻译,以便阅读. 1.  创建 Hive 中间表(Create ...

  7. 洛谷P3387 缩点模板

    给定一个n个点m条边有向图,每个点有一个权值,求一条路径,使路径经过的点权值之和最大.你只需要求出这个权值和. 允许多次经过一条边或者一个点,但是,重复经过的点,权值只计算一次. 因为可以重复经过点, ...

  8. UIDevice的简易说明

    typedef NS_ENUM(NSInteger, UIDeviceOrientation) //设备方向 { UIDeviceOrientationUnknown, UIDeviceOrienta ...

  9. 4、python数据类型之列表(list)

    列表列表常见操作1.索引取值 name_list = ['wang','zhou','li','hu','wu','zhao'] print(name_list[0]) print(name_list ...

  10. LDAP--对某些AD属性值是字节数组byte[]情况的类型转换方法

    //BitConverter.ToBoolean((searchResult.Properties["mDBUseDefaults"][0] as byte[]), 0); row ...