js瀑布流滚动加载

装载自：http://www.jb51.net/article/34141.htm（里面的文案细节写得不错，基本看完都能很快了解）

<style type="text/css">
    body{margin:0; font-family:微软雅黑;}
    #flow-box{margin:10px auto 0 auto; padding:0; position:relative}
    #flow-box li{
        width:190px; position:absolute; padding:10px; border:solid 1px #efefef; list-style:none;
        opacity:0;
        -moz-opacity:0;
        filter:alpha(opacity=0);
        -webkit-transition:opacity 500ms ease-in-out;
        -moz-transition:opacity 500ms ease-in-out;
        -o-transition:opaicty 500ms ease-in-out;
        transition:opaicty 500ms ease-in-out;}
    #flow-box li img{width:100%;}
    #flow-box li a{display:block; width:100%; text-align:center; font-size:14px; color:#333; line-height:18px; margin-top:10px; text-decoration:none;}
    .loadwrap{position:absolute; left:0; width:100%; text-align:center;}
</style>
<ul id="flow-box">
    <?php for($i=1;$i<5;$i++):?>
        <?php for($j=1;$j<9;$j++):?>
            <li><img style="width:200px;" src="ams/upload/dealerImage/<?= $j;?>.jpg" /><a href="#">图片标题<?= $j;?></a></li>
        <?php endfor;?>
    <?php endfor;?>
</ul>
<div id="loadimg" class="loadwrap"><img style="width:100px;" src="ams/upload/dealerImage/1.jpg" /></div>

<script type="text/javascript">
    function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离
        var w = document.documentElement.offsetWidth;//计算页面宽度
        var ul = document.getElementById("flow-box");
        var li = ul.getElementsByTagName("li");
        var iw = li[0].offsetWidth + mh;//计算数据块的宽度
        var c = Math.floor(w / iw);//计算列数
        ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中

        var liLen = li.length;
        var lenArr = [];
        for (var i = 0; i < liLen; i++) {//遍历每一个数据块将高度记入数组
            lenArr.push(li[i].offsetHeight);
        }

        var oArr = [];
        for (var i = 0; i < c; i++) {//把第一行排放好，并将每一列的高度记入数据oArr
            li[i].style.top = "0";
            li[i].style.left = iw * i + "px";
            li[i].style.opacity = "1";
            li[i].style["-moz-opacity"] = "1";
            li[i].style["filter"] = "alpha(opacity=100)";
            oArr.push(lenArr[i]);
        }

        for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度
            var x = _getMinKey(oArr);//获取最短的一列的索引值
            li[i].style.top = oArr[x] + mv + "px";
            li[i].style.left = iw * x + "px";
            li[i].style.opacity = "1";
            li[i].style["-moz-opacity"] = "1";
            li[i].style["filter"] = "alpha(opacity=100)";
            oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度
        }
        document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面

        function scroll() {//滚动加载数据
            var st = oArr[_getMinKey(oArr)];
            var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;
//            这里获取浏览器的高度，修改了作者的代码document.body.clientHeight
        if (scrollTop >= st - document.body.clientHeight){
                window.onscroll = null;//为防止重复执行，先清除事件
                _request(null, "GetList.php", function(data) {//当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数
                    _addItem(data.d, function() {//追加数据
                        var liLenNew = li.length;
                        for(var i = liLen; i < liLenNew; i++) {
                            lenArr.push(li[i].offsetHeight);
                        }
                        for(var i = liLen; i < liLenNew; i++) {
                            var x = _getMinKey(oArr);
                            li[i].style.top = oArr[x] + 10 + "px";
                            li[i].style.left = iw * x + "px";
                            li[i].style.opacity = "1";
                            li[i].style["-moz-opacity"] = "1";
                            li[i].style["filter"] = "alpha(opacity=100)";
                            oArr[x] = lenArr[i] + oArr[x] + 10;
                        }
                        document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位
                        liLen = liLenNew;
                        window.onscroll = scroll;//执行完成，恢愎onscroll事件
                    });
                })
            }
        }
        window.onscroll =scroll;
    }
    //图片加载完成后执行
    window.onload = function() {flow(10, 10)};
    //改变窗口大小时重新布局
    var re;
    window.onresize = function() {
        clearTimeout(re);
        re = setTimeout(function() {flow(10, 10);}, 200);
    }
    //追加项
    function _addItem(arr, callback) {
        var _html = "";
        var a = 0;
        var l = arr.length;
        (function loadimg() {
            var img = new Image();
            img.onload = function() {
                a += 1;
                if (a == l) {
                    for (var k in arr) {
                        var img = new Image();
                        img.src = arr[k].img;
                        _html += '<li><img src="' + arr[k].img + '" /><a href="#">' + arr[k].title + '</a></li>';
                    }
                    _appendhtml(document.getElementById("flow-box"), _html);
                    callback();
                }
                else {
                    loadimg();
                }
            }
            img.src = arr[a].img;
        })()
    }
    //ajax请求
    function _request(reqdata, url, callback) {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                var data = eval("(" + xmlhttp.responseText + ")");
                callback(data);
            }
        }
        xmlhttp.open("POST", url);
        xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
        xmlhttp.send(reqdata);
    }
    //追加html
    function _appendhtml(parent, child) {
        if (typeof (child) == "string") {
            var div = document.createElement("div");
            div.innerHTML = child;
            var frag = document.createDocumentFragment();
            (function() {
                if (div.firstChild) {
                    frag.appendChild(div.firstChild);
                    arguments.callee();
                }
                else {
                    parent.appendChild(frag);
                }
            })();
        }
        else {
            parent.appendChild(child);
        }
    }
    //获取数字数组的最大值
    function _getMaxValue(arr) {
        var a = arr[0];
        for (var k in arr) {
            if (arr[k] > a) {
                a = arr[k];
            }
        }
        return a;
    }
    //获取数字数组最小值的索引
    function _getMinKey(arr) {
        var a = arr[0];
        var b = 0;
        for (var k in arr) {
            if (arr[k] < a) {
                a = arr[k];
                b = k;
            }
        }
        return b;
    }
</script>

滚动条，加载获取资源罗列GetList.php文件

<?php
header("Content-Type:application/json;charset=utf-8");
echo('{"d": [
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/1.jpg", "title": "图片1"},
{"img": "http://wwwamc.xcar.com.cn/ams/upload/dealerImage/2.jpg", "title": "图片20"}
]}');
?>