js瀑布流滚动加载

来源：互联网发布：java json jackson 编辑：程序博客网时间：2024/05/22 07:51

装载自：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文件

<?phpheader("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"}]}');?>

0 0