<!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:0px;

    padding:0px;

    }

ul{

    width:1080px;

    margin: 100px auto 0;

    }

li{

    width:248px;

    float:left;

    border:1px solid pink;

    list-style:none;

    margin-right:10px;

    }

li div {

    border: 1px solid #000;

     padding: 10px;

     margin-bottom: 10px;

     }

li div img {

    width: 225px;

    display: block;

    }

</style>

<script>

window.onload = function ()

{

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

    var ali = oul.getElementsByTagName('li');

    var b = true;

    var ipage =  1;

    getlist();

    function getlist()

    {

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

        {

            var data = JSON.parse(data);

            if(!(data.length))

            {

                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);

            }

            b = true;

        });

    }

    window.onscroll = function ()

    {

        var _index = getshort();

        var oli = ali[_index];

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

        if(gettop(oli)+oli.offsetHeight < document.documentElement.clientHeight + scrollTop)

        {

            if(b)

            {

                b = false;

                ipage++;

                getlist();

            }

        }

    }

    function getshort()

    {

        var index = 0;

        var ih = ali[index].offsetHeight;

        for(var i = 1; i < ali.length; i++)

        {

            if(ali[i].offsetHeight < ih )

            {

                index = i;

                ih = ali[index].offsetHeight;

            }

        }

        return index;

    }

    function gettop(obj)

    {

        var itop = 0;

        while(obj)

        {

            itop +=obj.offsetTop;

            obj = obj.offsetParent;

        }

        return itop;

    }

    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);

                }

            }

        }

    }

}

</script>

</head>

<body>

<ul id="ul1">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>
<?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 瀑布流实现的更多相关文章

  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. jQuery ajax瀑布流加载静态的列表页面

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

  5. ajax 瀑布流 demo

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

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

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

  7. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  8. [妙味Ajax]第二课：实例：留言板、瀑布流

    知识点总结 瀑布流原理(固定布局) 总宽度大小固定 每列宽度固定,比如LI,高度自动计算,每列使用float:left来布局 计算最短的一列,将Div插到最短的一列处(li里面包div)(getSho ...

  9. 瀑布流原生ajax，demo

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

随机推荐

  1. HDU 4752 Polygon（抛物线长度积分）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4752 题意:给出一个抛物线和一个简单多边形.求抛物线在多边形内部的长度. 思路:首先求出多边形所有边和 ...

  2. JavaScript高级编程（一）

    书中第2章,在HTML中使用JavaScript摘要总结 2.1 <script>元素 <script>中的5个属性:charset:可选.表示通过src属性指定的代码的字符集 ...

  3. ubuntu中apt-get安装与默认路径

    一.apt-get 安装 deb是debian linus的安装格式,跟red hat的rpm非常相似,最基本的安装命令是:dpkg -i file.deb或者直接双击此文件 dpkg 是Debian ...

  4. ERROR 1442 (HY000):because it is already used by statement which invoked this stored function/tr

    看到mysql的触发器,随手写了一个: mysql> create trigger t_ai_test -> after insert on test -> for each row ...

  5. 使用JAVA直观感受快速排序与冒泡排序的性能差异

    初学算法,肯定会编写排序算法 其中两个最为有名的就是冒泡排序和快速排序 理论上冒泡排序的时间复杂度为O(N^2),快速排序的时间复杂度为O(NlogN) 下面本门使用JAVA,分别编写三段排序程序 对 ...

  6. 随便谈谈alphago与人机大战

    3月16日历时8天的人机大战终于落下帷幕,alphago以4:1的比分击败了当年如日中天的李世石.这个结果让我这个围棋爱好者+计算机爱好者百感交集…… ——一个时代落幕了,一个新的时代开启了. 这次人 ...

  7. Android利用Http下载文件

    Android利用Http下载文件 一.场景 下载存文本文件和下载如mp3等大容量的文件 界面 二.代码编写 1.AndroidMainfest.xml中配置 主要是解决网络权限和写SDCard的权限 ...

  8. 【英语】Bingo口语笔记(42) - Got系列

  9. 【转】linux设备驱动程序中的阻塞机制

    原文网址:http://www.cnblogs.com/geneil/archive/2011/12/04/2275272.html 阻塞与非阻塞是设备访问的两种方式.在写阻塞与非阻塞的驱动程序时,经 ...

  10. 关于Xcode的项目文件夹

    当我们在打开的项目中,对某个文件夹 Show in Finder的时候,发现对代码的分类文件夹没有全在一堆,在项目中明明对代码分了类,为什么在Finder中没有文件夹?? 这是因为,Xcode项目中的 ...