<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    body {margin: 0;}

    #ul1 {width: 1080px; margin: 100px auto 0;}

    li { width: 247px; list-style: none; float: left; margin-right: 10px; }

    li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}

    li div img { width: 225px; display: block;}

</style>

<script src="ajax.js"></script>

<script>

    window.onload = function(){

        var oUl = document.getElementById('ul1');

        var aLi = oUl.getElementsByTagName('li');

        var iLen = aLi.length;

        var ipage = 1;

        var onOff = true;

        getList();

        function getList(){

            ajax('get','getPics.php','cpage='+ipage,function(data){

            var data = JSON.parse(data);

            if(!data){

                return;

            }

            for(var i=0;i<data.length;i++){

                    var _index = getShort();

                    var oDiv = document.createElement('div');

                    var oImg = document.createElement('img');

                    oImg.src = data[i].preview;

                    oImg.style.width = '225px';

                    oImg.style.height =  data[i].height * ( 225 / data[i].width ) + 'px';

                    oDiv.appendChild(oImg);

                    var oP = document.createElement('p');

                    oP.innerHTML = data[i].title;

                    oDiv.appendChild(oP);

                    aLi[_index].appendChild(oDiv);

            }

            onOff = true;

          });

        }

        /*拉动滚动条触发*/

        window.onscroll = function(){

            var _index = getShort();

            var oLi = aLi[_index];

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            if(getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight +scrollTop ){

                if(onOff){

                    onOff = false;

                    ipage++;

                    getList();

                }

            }

        };

        /*获取元素top*/

        function getTop(obj){

            var iTop = 0;

            while(obj){

                iTop += obj.offsetTop;

                obj = obj.offsetParent;

            }

            return iTop;

        }

        /*获取页面li的最短高度*/

        function getShort(){

            var index = 0;

            var ih = aLi[index].offsetHeight;

            for(var i=1;i<iLen;i++){

                if(ih > aLi[i].offsetHeight){

                    index = i;

                    ih = aLi[index].offsetHeight;

                }

            }

            return index;

        }

    };

</script>

</head>

<body>

    <ul id='ul1'>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</body>

</html>
function ajax(method, url, data, success) {

    var xhr = null;

    try {

        xhr = new XMLHttpRequest();

    } catch (e) {

        xhr = new ActiveXObject('Microsoft.XMLHTTP');

    }

    if (method == 'get' && data) {

        url += '?' + data;

    }

    xhr.open(method,url,true);

    if (method == 'get') {

        xhr.send();

    } else {

        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

        xhr.send(data);

    }

    xhr.onreadystatechange = function() {

        if ( xhr.readyState == 4 ) {

            if ( xhr.status == 200 ) {

                success && success(xhr.responseText);

            } else {

                alert('出错了,Err：' + xhr.status);

            }

        }

    }

}
<?php

header('Content-type:text/html; charset="utf-8"');

/*

API:

    getPics.php

        参数

        cpage : 获取数据的页数

*/

$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);

$content = iconv('gbk', 'utf-8', $content);

//echo $content;

?>

ajax 瀑布流 demo的更多相关文章

  1. 原生ajax瀑布流demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.j ...

  2. Ajax——瀑布流

    基本概念 1.宽度是一致的,高度上参差不齐 2.新增内容优先放置在最矮的地方 核心难点 1.用一个数组存储每列的高度值 2.新值添加到值最小索引上,每次替换更新数组 插件使用 1.$.fn.exten ...

  3. Hawk 3.1 动态页面,ajax,瀑布流

    不少朋友反映,Hawk的手气不错,好像没法处理动态页面.其实很容易,比其他软件都容易,让我慢慢道来. 1. 什么是动态页面 很多网站,在刷新的时候会返回页面的全部内容,但实际上只需要更新一部分,这样可 ...

  4. ajax 瀑布流实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery ajax瀑布流加载静态的列表页面

    1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...

  6. iOS 瀑布流的Demo

    /** * 瀑布流Demo的主要代码,若想看完整的代码请到下面链接去下载 * * 链接: https://pan.baidu.com/s/1slByAHB 密码: r3q6 */ #import &l ...

  7. js原生瀑布流

    背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...

  8. 瀑布流原生ajax，demo

    最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释 img:ajax.php:demo.php 其中img中放入图片 1.jpg: ...

  9. 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

    瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用. 对于实现瀑布流布局的解决方案主要有以下两种方式: 1.对每一条显示数据使用绝对定位+浮动的方式,这样 ...

随机推荐

  1. JarvisOJ level3_x64

    这一题是和前面x86的差不多,都是利用了同一个知识点,唯一的区别就是使用的堆栈地址不同,x86是直接使用堆栈来传递参数的,而x64不同 x64的函数调用时整数和指针参数按照从左到右的顺序依次保存在寄存 ...

  2. 转：Zabbix 监控sqlserver

    一:Zabbix监控sqlserver 方法一: 1.思路整理 1.在zabbix server上安装Freetds.unixODBC.unixODBC-devel使其能够访问SQL Server数据 ...

  3. IP地址结构分类（包括主机号和网络好计算）

    IP地址:互联网上的每个接口的唯一标识. 长度:32bit. 五类不同的互联网地址格式: 各类IP地址范围: 点分十进制:32位的地址通常写成四个十进制数,其中每个整数对应一个字节. 主机号和网络的计 ...

  4. 2015-09-14-C++基础

    声明与定义 声音与定义的区别在于,声明没有给变量分配空间,而定义则给变量分配了空间:定义也是声明. extern int i; // 声明但未定义 int i ; //声明且定义 extern dou ...

  5. caffe之数据集介绍

    数据集:http://bigdata.51cto.com/art/201702/531276.htm 计算机视觉 MNIST: 最通用的健全检查.25x25 的数据集,中心化,B&W 手写数字 ...

  6. 科学家用AI看月球后，却发现了这些东西

    ​​人工智能(AI)几乎已经无所不在,我们生活的大多数方面都已经被它们渗透,随着AI在过去几年取得的令人震惊的进步,它在许多方面都可能帮助我们的生活变得更美好.近日,AI在月球上发现了近7000个未被 ...

  7. 如何有效地报告Bug

    英文原文:Simon Tatham,编译:Dasn 引言 为公众写过软件的人,大概都收到过很拙劣的bug报告,例如: 在报告中说“不好用”: 所报告内容毫无意义: 在报告中用户没有提供足够的信息: 在 ...

  8. Hadoop的存储架构介绍

    http://lxw1234.com/archives/2016/04/638.htm 该文章介绍了Hadoop的架构原理,简单易懂. 目前公司提供Hadoop的运算集群BMR,可以直接申请集群资源.

  9. Vuex安装使用

    vuex是以插件的方式存在的. 安装:打开项目的根目录,即package.json所在目录,执行以下命令: npm install vuex --save-dev 背景:小型应用里的每个组件维护着自有 ...

  10. 接轨国际，碰撞更多科研火花——第八届ChinaSys大会专访微软亚洲研究院首席研究员张霖涛

    作者:微软亚洲研究院实习生 徐祎雪 卢思奇 2015年6月5日至6日,由中国科学院深圳先进技术研究院先进计算与数字工程研究所主办的第八届中国计算机系统(ChinaSys)学术研讨会在厦门大学召开.来自 ...