<!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. Android内存管理（5）*官方教程：Logcat内存日志各字段含义，查看当前内存快照，跟踪记录内存分配，用adb查看内存情况时各行列的含义，捕获内存快照的3种方法，如何让程序暴漏内存泄漏的方法

    Investigating Your RAM Usage In this document Interpreting Log Messages                 内存分析日志中各消息的含 ...

  2. Android内存管理（4）*官方教程 含「高效内存的16条策略」 Managing Your App's Memory

    Managing Your App's Memory In this document How Android Manages Memory Sharing Memory Allocating and ...

  3. MVC用户登陆验证及权限检查（Form认证）

    1.配置Web.conf,使用Form认证方式   <system.web>     <authentication mode="None" />      ...

  4. ANSI是什么编码？

    用Notepad++创建一个文本文件text.txt,其默认编码格式为ANSI(乍看之下,还以为是ASCII呢),输入汉字居然不是乱码: 保存为test.txt,发送给你美国的同事Bob.他也用Not ...

  5. h-index

    https://leetcode.com/problems/h-index/ https://leetcode.com/mockinterview/session/result/xjcpjlh/ 看了 ...

  6. 函数buf_pool_init

    /********************************************************************//** Creates the buffer pool. @ ...

  7. 5个缺失的 JavaScript 数字格式化函数

    /** 下面两个函数都能对浮点数进行四舍五入,保留小数点后两位 **/ function CurrencyFormatted(amount) { var i = parseFloat(amount); ...

  8. Calculate drive total/free/available space

    using System; using System.Collections.Generic; using System.IO; using System.Text; namespace Consol ...

  9. 【英语】Bingo口语笔记(75) - 元音辅音的辨读

  10. C++ 编写Windows service

    最近实现一个windows server端守护进程启动服务功能(c++实现),遇到了一些问题,记录一下 1. 启动Service实现代码: int _tmain(int argc, TCHAR* ar ...