瀑布流实例及懒加载（echo.js）

shouzi 2019-01-15 原文

瀑布流布局：

图片等宽，不定高，按最低高度来顺序排列；实现方法：获取每次获取四行中最低高度对应的一行，将下一张加载的图片放在该位置，每次加载前都获取最低高度；

①请求图片的接口地址此php文件参数 cpage=1,2,3,4;

 1 <?php
 2 header('Content-type:text/html;charset="utf-8"');
 3 
 4 /*
 5     API:
 6     getPics.php
 7     参数：
 8     cpage：获取数据的页数
 9  */
10 
11 $cpage=isset($_GET['cpage'])?$_GET['cpage']:1;
12 
13 $url='http://www.wookmark.com/api/json/popular?page=' . $cpage;
14 
15 $content=file_get_contents($url);
16 $content=iconv('gbk', 'utf-8', $content);
17 
18 echo $content;

②请求方法提前封装的ajax

 1 function ajax(method,url,data,success)
 2 {
 3         try{
 4             var xhr=new XMLHttpRequest();
 5             }
 6         catch(e)
 7         {
 8             var xhr=new ActiveXObject('Microsoft.XMLHTTP');
 9         }
10         if(method=='get'&&data)
11         {
12             url+='?'+data;
13         }
14 
15         xhr.open(method,url,true);
16 
17         if(method=='get')
18         {
19             xhr.send();
20         }
21         else
22         {
23             xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
24             xhr.send(data);
25         }
26         xhr.onreadystatechange=function()
27         {
28             if(xhr.readyState==4)
29             {
30                 if(xhr.status==200)
31                 {
32                     success&&success(xhr.responseText);
33                 }
34                 else
35                 {
36                     alert("出错了Err:"+xhr.status);
37                 }
38             }
39         }
40 }

③请求数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
    body{margin:0;}
    #ul1{
        width:1080px;
        margin:100px auto 0;
    }

    #ul1 li{
        list-style: none;
        width:247px;
        float:left;
        margin-right:9px;
    }

    #ul1 li div{
        border:1px solid #000;
        padding:10px;
        margin-bottom: 10px;
    }

    img{
        width:225px;
        display:block;
    }
</style>
<script type="text/javascript" src='ajax.js'></script>
<script src="echo.min.js"></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 b=true;
    //获取初始化数据
    getList();
    function getList()
    {
        ajax('get','getPIcs.php','cpage='+iPage,function(data)
        {
            var data=JSON.parse(data);
            //后续没有数据了
            if(!data.length)
            {
                return;
            }
        for(var i=0;i<data.length;i++)
            {
                var _index=getShortLi();

                var oDiv=document.createElement('div');
                var oImg=document.createElement('img');
                oImg.src='loading.gif';
                oImg.setAttribute("data-echo",data[i].preview);  // echo .js 会自动将data-echo中数据替换到src 中，当图片在可视化区域内时
                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);
//echo 初始化
                echo.init({
                    offset: 0,
                    throttle: 0
                });

            }

            b=true;
        });
    }
// 滚动时加载数据
    window.onscroll=function()
    {
        var _index=getShortLi();
        var oLi=aLi[_index];
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

        if(oLi.offsetHeight+getTop(oLi)<document.documentElement.clientHeight+scrollTop)
        {
            if(b)
            {
                b=false;
                iPage++;  // 参数改变请求的数据改变
                getList();
            }
        }
    }

//取最短的li 
    function getShortLi()
    {
        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>
    <title></title>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>