Ajax实例-固定列数的瀑布流

本文通过一个Ajax实例展示了如何使用JavaScript和PHP实现一个固定列数的瀑布流布局。利用jsonp解决跨域问题,从后台获取数据并动态加载到前端页面,实现流畅的瀑布流展示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端页面:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                background: #EDEDED;
            }
            #ul1{
                width: 1000px;
                margin: 0 auto;
                list-style: none;
                overflow: hidden;
                background: #fff;
            }
            #ul1 li{
                width: 240px;
                float: left;
                margin: 0 5px;
                padding: 20px 0;
            }
            #ul1 li div{
                width: 220px;
                padding: 9px;
                border: 1px solid #999;
                margin-bottom: 10px;
            }
            #ul1 li div img{
                width: 220px;
                display: block;
            }
        </style>
        <script src="ajax.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("ul1");
                var aLi=oUl.getElementsByTagName('li');
                var iLen=aLi.length;
                var ipage=1;
                var flag=true;//定义一个开关,用于控制页面数据的加载

                getList();  //初始加载第一页(cpage=1)的数据

                function getList(){
                    ajax('get','getPics.php','cpage='+ipage,function(data){
                        var data=JSON.parse(data);//字符串转对象

                        if (!data.length) {
                            //数据加载完成
                            return;
                        }

                        var leng=data.length;

                        for (var i=0; i<leng; i++) {//循环每个数据,每次都往最短的li里添加数据
                            var _index=getShort();//最短li的索引

                            var oDiv=document.createElement('div');
                            var oImg=document.createElement('img');
                            oImg.src=data[i].preview;//预览图
                            oImg.style.height=220*data[i].height/data[i].width+'px'; //换算后的预览图高度
                            oDiv.appendChild(oImg);
                            var oP=document.createElement('p');
                            oP.innerHTML=data[i].title;
                            oDiv.appendChild(oP);

                            aLi[_index].appendChild(oDiv);  //往最短的li里面添加数据
                        }
                        //循环结束之后(本页所有数据加载完成之后)才能打开开关,才可加载下一页
                        flag=true;

                    })
                }

                //滚动鼠标触发
                window.onscroll=function(){
                    var _index=getShort();
                    var oLi=aLi[_index];
                    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

                    //当 最短li的高度加上到页面的距离 小于 滚动条高度加上屏幕的高度 时加载第二页(cpage=1)的数据
                    if (getTop(oLi)+oLi.offsetHeight < document.documentElement.clientHeight+scrollTop) {
                        if (flag) {
                            flag=false;//关上开关,防止在当前页面加载完成前继续加载其他页面
                            ipage++;//加载下一页数据
                            getList();
                        }
                    }
                }

                //获取最短li的索引值
                function getShort(){
                    var index=0; 
                    var ih=aLi[index].offsetHeight;
                    for (var i=1; i<iLen; i++) {
                        if (aLi[i].offsetHeight<ih) {
                            index=i;
                            ih=aLi[i].offsetHeight;
                        }
                    }
                    return index;
                }

                //获取元素到页面最顶端的距离
                function getTop(obj){
                    var iTop=0;
                    while(obj){
                        iTop+=obj.offsetTop;
                        obj=obj.offsetParent;
                    }
                    return iTop;
                }

            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

php代码:

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

?>

返回数据:

[
    {"id":"630642",
    "referer":"https:\/\/www.behance.net\/gallery\/10983193\/Clara-Daniel",
    "url":"http:\/\/www.wookmark.com\/image\/630642\/clara-daniel-on",
    "width":"600",
    "height":"513",
    "image":"http:\/\/www.wookmark.com\/images\/original\/630642_wookmark.jpg",
    "preview":"http:\/\/www.wookmark.com\/images\/thumbs\/630642_wookmark.jpg"},
    …
]

Ajax.js:

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);
            }
        }

    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值