<!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. 史上最全Java面试题全集

    2013年年底的时候,我看到了网上流传的一个叫做<Java面试题大全>的东西,认真的阅读了以后发现里面的很多题目是重复且没有价值的题目,还有不少的参考答案也是错误的,于是我花了半个月时间对 ...

  2. python 组件

    组件:JQueryUI.EasyUI.BootStrap 每一个框架都要学习它们的规则.

  3. mac上svn: This client is too old to work with working copy 问题的解决

    安装svn时,提示This client is too old to work with working copy........原因:svn的版本过旧,安装1.8的svn即可.下面简要说明一些步骤: ...

  4. SWUST OJ NBA Finals(0649)

    NBA Finals(0649) Time limit(ms): 1000 Memory limit(kb): 65535 Submission: 404 Accepted: 128   Descri ...

  5. c++入门资源

    http://www.cnblogs.com/jackyyang7/articles/2479482.htmlvs2010编译器的使用 https://www.cnblogs.com/me115/ar ...

  6. 在python中连接mysql数据库，并进行增删改查

    数据库在开发过程中是最常见的,基本上在服务端的编程过程中都会使用到,mysql是较常见的一种数据库,这里介绍python如果连接到数据库中,并对数据库进行增删改查. 安装mysql的python扩展 ...

  7. [PyTorch入门之60分钟入门闪击战]之神经网络

    神经网络 来源于这里. 神经网络可以使用torch.nn包构建. 现在你对autograd已经有了初步的了解,nn依赖于autograd定义模型并区分它们.一个nn.Module包含了层(layers ...

  8. K8S实战-构建Django项目-03-使用共享存储

    上篇博文,发布之后,正好跟着双十一,不知道大家剁手了没~~.好啦,言归正传先声明一下,每周1,3,5更新教程,大家如果想要了解更多的教程可以重温一下之前的教程或者,关注崔格拉斯 公众号,大家想要源码的 ...

  9. Android系统使用Shell脚本预装apk

    客户需求:需要在Android系统预安装一个或者若干个apk,客户可以选择自行卸载并且卸载后系统再次启动并不会再次自动安装. 考虑到需要批量安装应用,我这里考虑到使用灵活的shell脚本.shell脚 ...

  10. objectarx 得到有宽度的多段的轮廓

    使用到的命令是:_.wmfout和_.import以及PEdit步骤:1.先通过_.wmfout和_.import得到轮廓线,得到的轮廓线是一个块.方法如下: //ssname:选择的有宽度的多段线 ...