<!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. 吴裕雄--天生自然python学习笔记：Python3 正则表达式

    Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python 语言拥有全部的正则表达式功能. compile 函数根据一个模式字符串和可选的标志参 ...

  2. Proxmox如何进入单人维护模式(重置root密码)

    官网连接:https://pve.proxmox.com/wiki/Root_Password_Reset Root Password Reset     Contents [hide] 1Reset ...

  3. Linux系统添加新用户

    Linux系统中一般不直接使用root用户进行操作,需要添加新的用户. 首先,查看当前系统已有的用户 cat /etc/passwd 查看用户组 cat /etc/group 其次,添加想要的用户组和 ...

  4. 仿射密码Python实现

    算法分析 仿射密码结合了移位密码和乘数密码的特点,是移位密码和乘数密码的组合. 仿射密码的加密算法就是一个线性变化,即对明文字符x,对应的密文字符为y=ax+b(mod26)其中,a, b属于Z26且 ...

  5. [SDOI2008] 洞穴勘测 (LCT模板)

    bzoj 2049 传送门 洛谷P2147 传送门 这个大佬的LCT详解超级棒的! Link-Cut Tree的基本思路是用splay的森林维护一条条树链. splay的森林,顾名思义,就是若干spl ...

  6. 你相信吗：一加仑汽油可以给iPhone充电20年

    一直以来,苹果公司的iPhone系列手机受到了全世界人民的喜欢,很多人就此成为了果粉.或许是由于我们过于在意iPhone系列手机出彩的外形,所以忽略了很多关于iPhone手机有意思的消息,我们今天就来 ...

  7. 从iPhone X到三星S9，为何现在山寨还能如此肆无忌惮？

    X到三星S9,为何现在山寨还能如此肆无忌惮?" title="从iPhone X到三星S9,为何现在山寨还能如此肆无忌惮?"> 曾几何时,以"土豪金&qu ...

  8. 印度IT产业今年裁员5.6万，自动化大潮下安有完卵

    [腾讯科技编者按]业界媒体Quatz撰文指出,对于印度科技从业者来说,2017年是噩梦连连的一年.直到几年前,IT业都还是印度提供就业岗位最多的行业之一,但在今年,这个1600亿美元规模的行业裁掉了5 ...

  9. 【底层原理：深入理解计算机系统】#1 一切从"hello world"说起 （一）

    计算机系统是由硬件和系统软件组成的,他们共同工作来运行应用程序.虽然系统的具体实现方式随着时间不断的在变化,但是系统的内在概念却没有改变的. 所有的计算机硬件和软件有着相似的结构和功能.这个系列专题便 ...

  10. 软工 实验一 Git代码版本管理

    实验目的: 1)了解分布式版本控制系统的核心机理: 2)   熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git init git status指令 3 ...