<!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. 如何为Eclipse安装Eclipse Marketplace插件

    Eclipse Marketplace是个插件应用商店,很实用的一个功能. 打开 eclipse,help--Eclipse Marketplace Client就能找到 有的eclipse中没有这个 ...

  2. java 的UUID的具体用法

    参照JDK public final class UUIDextends Objectimplements Serializable, Comparable<UUID> 表示通用唯一标识符 ...

  3. 一些数论概念与算法——从SGU261谈起

    话说好久没来博客上面写过东西了,之前集训过于辛苦了,但有很大的收获,我觉得有必要把它们拿出来总结分享.之前一直是个数论渣(小学初中没好好念过竞赛的缘故吧),经过一道题目对一些基础算法有了比较深刻的理解 ...

  4. Hybris 预备知识学习列表

    需要学习的: Spring,Spring对于hybris非常重要,整个hybris是基于spring的架构之上. 包括例如spring mvc,spring security, 设计模式 软件构建工具 ...

  5. R语言数据读入函数read.table

    1.read.table:可以读TXT也可以读CSV (1)file:文件名 (2)header:是否包含表头 (3)sep:分隔符,如果不设定默认是空格 (4)dec:标志小数点符号,有些国家的小数 ...

  6. jquery radio 取值 取消选中 赋值

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

  7. HDU 3433 (DP + 二分) A Task Process

    题意: 有n个员工,每个员工完成一件A任务和一件B任务的时间给出,问要完成x件A任务y件B任务所需的最短时间是多少 思路: DP + 二分我也是第一次见到,这个我只能说太难想了,根本想不到. dp[i ...

  8. 51nod1403 有趣的堆栈

    看成括号序列的话第二种方法其实就是左括号和右括号之间有多少对完整的括号. #include<cstdio> #include<cstring> #include<ccty ...

  9. hdu 4619 Warm up 2 网络流 最小割

    题意:告诉你一些骨牌,然后骨牌的位置与横竖,这样求最多保留多少无覆盖的方格. 这样的话有人用二分匹配,因为两个必定去掉一个,我用的是最小割,因为保证横着和竖着不连通即可. #include <s ...

  10. BZOJ 2286 消耗战

    虚树裸题. 23333以后memset千万慎用. #include<iostream> #include<cstdio> #include<cstring> #in ...