<!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. MTK平台缩写

    HSPA:High Speed Packet Access smartphone application processor,高速分组接入的智能手机应用程序处理器 META mode:Mobile E ...

  2. R语言AMORE包实现BP神经网络——German数据集

    library(AMORE)data<-read.table('G:\\dataguru\\ML\\ML09\\基于BP网络的个人信贷信用评估\\基于BP网络的个人信贷信用评估\\german. ...

  3. bzoj2119

    题意就是差分后求形如ABA的串的个数,B的长度为M 这是2011国家集训队互测的试题,是道好题,我直接给出出题人的题解吧: 对于这种在线性序列上的组合计数问题,我们很容易想到一个工具:分治!分治算法在 ...

  4. 【笨嘴拙舌WINDOWS】消息机制

    如果将WINDOWS比做一个人,那么他就是为你提供各种服务的巫师,他手上有各式各样,奇形怪状的奇葩物品.他脑子充满了智慧,能够为你解决你所不能解决的疑难杂症.但是他不认识你! 你从小立志要想考状元,去 ...

  5. [ionic开源项目教程] - 第2讲 新建项目,配置app.js和controllers.js搭建基础视图

    新建项目 由项目功能架构图选择合适的页面架构,这里选用Tab,ionic新建项目,默认的模板就是tab. $ ionic start TongeNews Creating Ionic app in f ...

  6. HDU (线段树 单点更新) I Hate It

    和上一道题没什么变化,只不过把单点增减变成了单点替换,把区间求和变成了区间求最大值. #include <cstdio> #include <algorithm> using ...

  7. 高性能WEB开发之Web性能测试工具推荐

    Firebug: Firebug 是firefox中最为经典的开发工具,可以监控请求头,响应头,显示资源加载瀑布图: HttpWatch: httpwatch 功能类似firebug,可以监控请求头, ...

  8. 所在实习公司的JS笔试题

    在班上无聊的时候看到了一份JS笔试题(我是电面进去的,没做过这份题~~),开始还觉得蛮简单......后来觉得还是很有意思的,贴出来一起看看. 题目一: if(!("a" in w ...

  9. SPY++的使用

    百度百科Spy++ 使用的是VS2010.net自带的功能,可以从开始菜单中打开.

  10. Http和Https三次握手那些事

    今天我总结了什么是HTTP三次握手,还有HTTPS握手的过程以及为什么HTTPS是安全的. 一:HTTP与TCP/IP区别? --->TPC/IP协议是传输层协议,主要解决数据如何在网络中传输 ...