ajax瀑布流

最新推荐文章于 2021-09-06 18:40:35 发布

王华桥

最新推荐文章于 2021-09-06 18:40:35 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏： js小记文章标签： ajax php 数据

本文链接：https://blog.youkuaiyun.com/whqwyn/article/details/52850452

js小记专栏收录该内容

24 篇文章

订阅专栏

首先要有必要的PHP接口技术。去获取部分数据

接口代码如下：

<?php
header('Content-type:text/html; charset="utf-8"');
$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;

?>

二、搭结构并布局（html+css）;

<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>

三、最重要的开始了

1、获取DOM节点并初始化数据

var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var ipage=1;
ajaxFN();
var b=true;

2、通过数据接口文件getPics.php获取数据。然后创建对象并插入到li里面

function ajaxFN(){
                //通过数据接口文件getPics.php获取数据。然后插入到li里面
                ajax('get','getPics.php','cpage'+ipage,function(data){
                var data=JSON.parse(data);  
                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=225+'px';
                    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);                   
                }               
            });
            return b=true;
        }       
        function getShort(){
            var index=0;
            var minLiH=aLi[index].offsetHeight;
            for(var i=0;i<aLi.length;i++){              
            if(minLiH>aLi[i].offsetHeight){                                 
                    minLiH=aLi[i].offsetHeight;
                    index=i;
                }
            }
            return index;
        }

四、当页面向下滑动的距离比最小的li的高度还小的时候、就触发ajaxFN（）函数加载第二页的内容；

    window.onscroll=function(){
            var index2=getShort();
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            var PH=document.documentElement.clientHeight;
            if(PH+scrollTop>aLi[index2].offsetHeight+aLi[index2].offsetTop){
                if(b){
                    b=false;
                    ipage++;
                    ajaxFN();                   
                }               
            }
        };      
    };

全部代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body {margin: 0;}
#ul1 {width: 1080px; margin: 100px auto 0;}
li { width: 247px; list-style: none; float: left; margin-right: 10px; }
li div {border: 1px solid crimson; padding: 10px; margin-bottom: 10px;}
li div img { width: 225px; display: block;}
</style>
<script src="ajax.js"></script>
<script type="text/javascript">
    window.onload=function(){
        //初始化数据
        var oUl=document.getElementById('ul1');
        var aLi=oUl.getElementsByTagName('li');
        var ipage=1;
        ajaxFN();
        var b=true;
//--------------------------------------------------------------------              
        function ajaxFN(){
                //通过数据接口文件getPics.php获取数据。然后插入到li里面
                ajax('get','getPics.php','cpage'+ipage,function(data){
                var data=JSON.parse(data);
            //  alert(data.length);
                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=225+'px';
                    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);                   
                }               
            });
            return b=true;
        }
//--------------------------------------------------------------------              
        function getShort(){
            var index=0;
            var minLiH=aLi[index].offsetHeight;
            for(var i=0;i<aLi.length;i++){
                if(minLiH>aLi[i].offsetHeight){                                     
                    minLiH=aLi[i].offsetHeight;
                    index=i;
                }
            }
            return index;
        }
//--------------------------------------------------------------------      
        window.onscroll=function(){
            var index2=getShort();
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            var PH=document.documentElement.clientHeight;
            if(PH+scrollTop>aLi[index2].offsetHeight+aLi[index2].offsetTop){
                if(b){
                    b=false;
                    ipage++;
                    ajaxFN();                   
                }               
            }
        };      
    };

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