ajax 瀑布流实现

浏览数：19 / 时间：2015年06月09日

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

?>