找回密码
当前位置：前端开发者 > 教程 > 正文

WEB前端开发技能-瀑布流详解

2018-07-17 分类：教程 阅读(835) 评论(0)
前端开发的技术栈是架构师吗|手机端前端开发|前端开发辅助工具 英文怎么说
整体理解： 我的瀑布流就是在四个li中添加div,div包含了图片与段落。选择li长度最短的把ajax加载的div放入其中，当鼠标滑轮到达最短的li底部时，就应该再用ajax加载div进入了。 其中再调用ajax这里，success &&
success(xhr.responseText); xhr.responseText是返回的数据，已经通过参数传入了，而且默认是字符串形式，需要把字符串解析成js代码。使用eval(),JSON.parse()都可以。但一定要解析才能用。
get是用ulr地址来发送数据，post是用头信息,所以要设置头信息，代码在注释有。我用的get,但没传数据去php; 由于用的滑轮事件调用加载函数，滑动时会按时间持续触发，所以需要用if判断onOff变量，运行ajax时onOff置为false，防止加滑轮滚动时载函数多次触发。
ajax难在传来数据的解析与使用，接口的分析是关键。 大概坑就是这些啦。
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml” &gt; <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>practice</title>
<style type=”text/css”>
    body {
        margin: 0;
    }
    ul {
        margin: 20px auto;
        width: 1080px;
    }
    li {
        list-style: none;
        float: left;
    }
    li div {
        border: 2px solid #00CCCC;
        padding: 5px;
        margin: 0 10px 10px 0;
    }
    li div p {
        text-align: center;
        font-size: 15px;
        color: #00CCFF
    }
    li div img {
        width: 220px;
        display: block;
    }
</style>
<script type=”text/javascript”>
    window.onload = function () {
        var oUl = document.getElementById(‘ul1’);
        var aLi = oUl.getElementsByTagName(‘li’);
        var iLen = aLi.length;
        var onOff = true;
        //调用加载函数
        getList();
        //加载函数
        function getList() {
            ajax(‘get’, ‘a.php’, ”, function (data) {
                var data = eval(data);
                //无数据便结束
                if (!data.length) {
                    return;
                };
                //历遍数据
                for (var i = 0; i < data.length; i++) {
                    //取得长度最小的li
                    var short = getShort()
                    //创建包裹div
                    var oDiv = document.createElement(‘div’);
                    //动态创建图片并添加进div
                    var oImg = document.createElement(‘img’);
                    oImg.src = data[i].url;
                    oImg.style.width = 220 + ‘px’;
                    oDiv.appendChild(oImg);
                    //动态创建p标签并添加进div
                    var oP = document.createElement(‘p’);
                    oP.innerHTML = data[i].title;
                    oDiv.appendChild(oP);
                    //把div添加进最短的li
                    aLi[short].appendChild(oDiv);
                    //鼠标悬停与移除事件
                    oImg.onmouseover = function () {
                        this.style.width = 300 + ‘px’;
                        this.style.height = 400 + ‘px’;
                    };
                    oImg.onmouseout = function () {
                        this.style.width = 220 + ‘px’;
                        this.style.height = 300 + ‘px’;
                    };
                } //创建完成后打开onOff,可以在次调到用函数
                onOff = true;
            });
        }
        //找到最短的li,比第一个li长度小的就把index,height置为该li的数值
        function getShort() {
            var index = 0;
            var height = aLi[index].offsetHeight;
            for (var i = 0; i < iLen; i++) {
                if (aLi[i].offsetHeight < height) {
                    index = i;
                    height = height = aLi[i].offsetHeight;
                }
            }
            return index;
        };
        //当鼠标滚轮到最短的li长度时调用加载函数，加载图片
        window.onscroll = function () {
            var index = getShort();
            var oLi = aLi[index];
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 当前li到顶部+自身长度<滚轮距离+当前可视区长度时触发
            if (getTop(oLi) + oLi.offsetHeight < document.documentElement.clientHeight + scrollTop) {
                if (onOff) {
                    onOff = false;
                    getList();
                }
            }
        };
        //找到li距顶部长度
        function getTop(obj) {
            var top = 0;
            while (obj) {
                top += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return top;
        }
    };
    //加载函数,ajax
    function ajax(method, url, data, success) {
        var xhr = null;
        //得到XMLHttpRequest对象,兼容ie
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
        }
        //使用get方式同时要传数据过去时，url地址带上数据，使用时间戳避免缓存影响
        if (method == ‘get’ && data) {
            url += ‘?’ + data + ‘&’ + new Date().getTime();
        }
        //状态改变事件，返回的数据解析完成时把数据以字符串形式作为参数传给回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    success && success(xhr.responseText);
                } else {
                    alert(‘出错了,Err：’ + xhr.status);
                }
            }
        }
        //准备xhr，如果以post形式发送，需要设置请求头，并且把数据放在头信息，xhr.send()内发生
        xhr.open(method, url, true);
        if (method == ‘get’) {
            xhr.send();
        } else {
            xhr.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);
            xhr.send(data);
        }
    }
</script>
<body>
    <ul id=”ul1″>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    </div>
</body>
</html>
<?php
header(‘content-type:text/html;charset=”utf-8″‘);
error_reporting(0);
//$jsontext='{“firstname”:”Jesper”,”surname”:”Aaberg”,”phone”:[“555-0100″,”555-0120”]}’;
$data='[{“url”:”http://s20.mogucdn.com/b7/pic/150104/11v7xt_ieydiodggq4geyrymuytambqgiyde_640x960.jpg_220x330.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s20.mogucdn.com/b7/pic/150114/19ktd1_ieygkn3dgnrwcztcmuytambqgyyde_1000x1500.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s20.mogucdn.com/b7/pic/141101/19ktd1_ieydsyjxge4demrumqytambqmeyde_1000x1500.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s8.mogucdn.com/pic/141204/16p41n_ieygiyjxmrrwcytfmqytambqgiyde_195x210.jpg%E2%80%A8″,”title”:”蘑菇街&quot;},
{“url”:”http://s6.mogucdn.com/pic/141204/16p41n_ieyggobrgi4dqylfmqytambqgyyde_195x210.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s7.mogucdn.com/b7/pic/150126/15wl9v_iezgintbmi2dgy3gmuytambqmmyde_640x960.jpg_280x999.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s6.mogucdn.com/b7/pic/150205/a966_ie2dmnlcmy4dombtmyytambqgiyde_1334x887.jpg_278x320.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s7.mogucdn.com/pic/141204/14dksm_ieydindegiytiytfmqytambqmmyde_195x210.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s6.mogucdn.com/b7/pic/150209/19ktd1_ie2tozryga2domzumyytambqhayde_640x960.jpg_320x999.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s8.mogucdn.com/b7/pic/150208/cgnf_ieztoobsgvrtizrtmyytambqgyyde_1136x1136.jpg_278x320.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s6.mogucdn.com/b7/pic/150209/17atgo_iezgeyzwga2domzumyytambqmmyde_700x1050.jpg_320x999.jpg”,”title”:”蘑菇街&quot;},
{“url”:”http://s7.mogucdn.com/pic/150106/heiyan_ieygeyzrgqydinbzmuytambqgiyde_910x282.jpg”,”title”:”蘑菇街&quot;}
]’;
echo $data;
?>
前端开发的总结|微信公众号前端开发sdk|微信开发前端接口文档
赞(0)
前端开发者 » WEB前端开发技能-瀑布流详解
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论