ajax 瀑布流實現

最後更新：2015-02-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

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

<?phpheader(‘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 瀑布流實現

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More