<!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. PHP empty函数判断0返回真还是假?

    最近项目中,遇到一个字段是 “是否启用”值为0,1 在查询时没想就写了 if ( isset($args_array['useFlg']) && !empty($args_array[ ...

  2. 《OD大数据实战》Storm环境搭建

    一.环境搭建 1. 下载 http://www.apache.org/dyn/closer.lua/storm/apache-storm-0.9.6/apache-storm-0.9.6.tar.gz ...

  3. oracle数据库导入导出命令！

    Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份. 大多情况都可以用Oracle数据导入导出完成数据的备份和还原(不会造成数据的丢 ...

  4. 线段树总结 （转载 里面有扫描线类 还有NotOnlySuccess线段树大神的地址）

    转载自:http://blog.csdn.net/shiqi_614/article/details/8228102 之前做了些线段树相关的题目,开学一段时间后,想着把它整理下,完成了大牛NotOnl ...

  5. document.body.innerHTML用jquery如何表示

    $("body").html('XXXX');     //这个是赋值 $("body").html();    //这个是获取HTML的内容

  6. 函数lock_rec_get_first_on_page

    lock结构体 详见 /*********************************************************************//** Gets the first ...

  7. 关于Qt

    什么是Qt Qt是一个针对桌面.嵌入式.移动设备的一个跨平台的应用程序开发框架,支持的平台包括Linux.OS X.Windows.VxWorks.QNX.Android.iOS.BlackBerry ...

  8. 一个基于WebGL的仿真3D水池有逼真的水波纹效果

    最近在研究WebGL,看到国外很多高手做的很多超炫的3D效果,无比羡慕.忍不住把效果趴下来研究,下面介绍一个逼真的游泳池中浮动小球的效果.效果非常绚丽,功能强大.示例可切换观察水池的视角,不同视角考虑 ...

  9. UVA 489 Hangman Judge （字符匹配）

    题意:给一个字符串A,只含小写字符数个.再给一个字符串B,含小写字符数个.规则如下: 1.字符串B从左至右逐个字符遍历,对于每个字符,如果该字符在A中存在,将A中所有该字符删掉,若不存在,则错误次数+ ...

  10. 20160204.CCPP体系详解(0014天)

    程序片段(01):define.h+data.h&data.c+control.h&control.c+view.h&view.c+AI.h&AI.c+main.c 内 ...