最近听朋友们说起瀑布流挺多的，自己就去研究下了，一个简单的原生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. String与字符数组

    public class Example { static String str = new String("good"); static char[] ch = {'a','b' ...

  2. setTimeout关于函数名做参数的问题

    前几天在调bug时发现一个诡异的问题. function test(){ alert('4 seconds!'); } setTimeout(test(),4000); 这段代码立即执行,当时看不出问 ...

  3. hdu1077

    #include<iostream> #include<cmath> using namespace std; struct Point { double x,y; }; do ...

  4. IPMITOOL 配置BMC用户设置

    IPMITOOL 配置BMC用户设置 本文档共介绍5条ipmi设置user的命令,这些命令需要使用root权限才能使用,其中- H为需要操作的BMC ip,-I lanplus为使用rmcp+协议发送 ...

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

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

  6. MySql中存储过程的理解

    到底什么是存储过程,又为什么需要使用存储过程? 存储过程简单来说,就是为以后的使用而保存的一条或多条MySQL语句的集合,可将其视为批文件,虽然它们的作用不仅限与批处理. 使用存储过程有3个主要的好处 ...

  7. 采用DCT进行图像压缩

    一.实验目的:熟悉变换编码的图像压缩方法 二.实验内容:以所给图像为例,采用dct进行图像压缩编码,通过改变模板矩阵中非零元素的个数,得到不同缩编码图像, 根据公式 ,编写程序计算原图像和dct变换后 ...

  8. 使用js页面添加或删除标签

    // 添加var container = document.getElementById('divAudio');container.appendChild(audio); // 删除var cont ...

  9. python之05 操作系统用户密码修改

    ubuntu的操作系统修改密码的操作方法: 一.在系统启动时按住shift键,出现下图的界面 二.按下e进入命令行,找到下图红色框中的文字并修改成rw init=/bin/bash 然后按F10启动, ...

  10. Tomcat&Servlet

    Tomcat&Servlet 一.web开发相关的概念 1. 软件架构 1.1 C/S架构 C:Client客户端, S:Server服务器 比如:QQ.微信.大型网游 优点: 显示效果炫 安 ...