最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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. error C2144: 语法错误:“int”的前面应有“;”

    error C2144: 语法错误:"int"的前面应有";" C++- error C2144 syntax error : 'int' should be ...

  2. hadoop-2.3.0-cdh5.1.0完全分布式集群配置及HA配置（待）

    一.安装前准备: 操作系统:CentOS 6.5 64位操作系统 环境:jdk1.7.0_45以上,本次采用jdk-7u55-linux-x64.tar.gz master01 10.10.2.57  ...

  3. c++中placement new

    c++中的placement new是::operator new的重载版本,用于在已经分配好的内存上创建对象.这样就可以在用户空间对内存进行操作,减少了对象生成的成本,控制对象的地址从而减少内存碎片 ...

  4. Sharepoint foundation2013独立安装教程

    Sharepoint foundation2013安装教程 一,什么是sharepoint foundation2013 大家都知道Sharepoint是一个非常强大的企业级开发平台,它包含各种功能比 ...

  5. laravel 常见操作

    1.url()

  6. ZOJ - 3777(状压dp)

    The 11th Zhejiang Provincial Collegiate Programming Contest is coming! As a problem setter, Edward i ...

  7. 对于多线程程序，单核cpu与多核cpu是怎么工作的

    此文中的大部分资料来自于网络上,我只是觉得把有道理的整理一下,方便以后查阅. 1.多线程在单核和多核CPU上的执行效率问题的讨论a1: 多线程在单cpu中其实也是顺序执行的,不过系统可以帮你切换那个执 ...

  8. python之02数据类型学习

    参考链接:http://www.cnblogs.com/yuanchenqi/articles/5782764.html python的数据类型有:Number.Boolean.String .Lis ...

  9. VBA学习笔记

    这是一个学习VBA编程的学习笔记. 一. 介绍 二. 使用手册 2.1. 如何在Excel2010中开始使用VBA? 2.2. 如何使用VBA编辑器进行编程? 三. 语法说明 3.1 数据类型 3.2 ...

  10. Oracle的RBO和CBO

    Oracle的优化器有两种优化方式,即基于规则的优化方式(Rule-Based Optimization,简称为RBO)和基于代价的优化方式(Cost-Based Optimization,简称为CB ...