瀑布流之ajax

wf_js.html（展示页）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
                background: #f3f2f3;
            }
            #main {
                border: 1px solid red;
                width: 1225px;
                margin: 0 auto;
            }
            .column {
                width: 245px;
                float: left;
            }
        </style>
    </head>

    <body>
        <button id="btn">加载图片</button>
        <div id="main">
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
            <div class="column"></div>
        </div>
    </body>
</html>
<script src="ajax.js"></script>
<script type="text/javascript">
    //点击按钮  首先加载数据到不同的列上
    var cols = document.getElementsByClassName("column");
    btn.onclick = function(){
        ajax( "pbl.json" , function(msg){
            var arr = JSON.parse( msg );
            for( var i = 0 ; i < arr.length ; i++ ){
                var pro = arr[i];
                var oimg = document.createElement("img");
                oimg.src = pro.src;
                //设置图片的宽度和高度
                oimg.width = "245";
                oimg.height = pro.height;
                //获取最小高度列的索引
                var index = getMinHeightIndex();
                cols[index].appendChild( oimg );
            }
        } )
    }
    
    ///定义一个函数 功能是获取最小高度列的下标
    function getMinHeightIndex(){
        //假设五列中第一列的高度是最小的
        var minHeight = cols[0].offsetHeight;
        var index = 0;//第一列的下标
        for( var i = 0 ; i < cols.length ; i++ ){
            if( minHeight > cols[i].offsetHeight ){
                minHeight = cols[i].offsetHeight;
                index = i;
            }
        }
        return index;
    }
    
    window.onscroll = function(){
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
        //当最小高度列高 < 可视窗口高度+页面滚走的距离 时  开始加载数据
        var winHeight = window.innerHeight;
        var minHeight = cols[getMinHeightIndex()].offsetHeight;
        if( minHeight < winHeight + sTop ){
            btn.onclick();//持续加载图片
        }
    }
</script>

ajax.js

function ajax(url,fnWin,fnFaild){
    var ajax = null;
    if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
    }else{
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    ajax.open("get",url,true);    
    ajax.send();
    ajax.onreadystatechange = function (){
        if (ajax.readyState==4) {
            if(ajax.status == 200){
                if (fnWin) { //判断该函数是否存在，如果存在，就调用  返回结果
                    fnWin(ajax.responseText); 
                }            
            }else{
                if (fnFaild){
                    fnFaild();
                }    
            }
        }
    }
}

pbl.json

[
{"src":"img/1.jpg","alt":"1","height":"343"},
{"src":"img/2.jpg","alt":"2","height":"300"},
{"src":"img/3.jpg","alt":"3","height":"230"},
{"src":"img/4.jpg","alt":"4","height":"230"},
{"src":"img/5.jpg","alt":"5","height":"306"},
{"src":"img/6.jpg","alt":"6","height":"333"},
{"src":"img/7.jpg","alt":"7","height":"335"},
{"src":"img/8.jpg","alt":"8","height":"172"},
{"src":"img/9.jpg","alt":"9","height":"172"},
{"src":"img/10.jpg","alt":"10","height":"345"},
{"src":"img/11.jpg","alt":"11","height":"340"},
{"src":"img/12.jpg","alt":"12","height":"153"},
{"src":"img/13.jpg","alt":"13","height":"345"},
{"src":"img/14.jpg","alt":"14","height":"316"},
{"src":"img/15.jpg","alt":"15","height":"327"},
{"src":"img/16.jpg","alt":"16","height":"345"},
{"src":"img/17.jpg","alt":"17","height":"172"},
{"src":"img/18.jpg","alt":"18","height":"282"},
{"src":"img/19.jpg","alt":"19","height":"224"},
{"src":"img/11.jpg","alt":"11","height":"340"},
{"src":"img/12.jpg","alt":"12","height":"153"},
{"src":"img/13.jpg","alt":"13","height":"345"},
{"src":"img/14.jpg","alt":"14","height":"316"},
{"src":"img/15.jpg","alt":"15","height":"327"},
{"src":"img/16.jpg","alt":"16","height":"345"},
{"src":"img/17.jpg","alt":"17","height":"172"},
{"src":"img/18.jpg","alt":"18","height":"282"},
{"src":"img/19.jpg","alt":"19","height":"224"},
{"src":"img/20.jpg","alt":"20","height":"344"}
]

猜你喜欢