前端开发瀑布流Rewrite

前端小游戏开发
游戏开发中的前端
前端游戏开发引擎

他得做法是利用jsonp跨域取值,也就是动态创建<script src=”脚本”>调用callback 函数,这点值得学习的,可以参考http://justcoding.iteye.com/blog/1366102

顺带贴一张跨域的总结:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html很全面。

这次重写还注意了一点就是:每一次添加新图片之前要先判断一下哪一列最短,如果某列最短,加到最短的那一列。

代码片段 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title>瀑布流new</title>
        <style>
            h1 {
                color: #903;
            }
            body {
                background-color: #ccc;
            }
            .wrapper {
                margin: 0px auto;
                width: 1100px;
                text-align: center;
            }
            .picwrapper {
                width: 100%;
                padding: 20px 0px 0px 20px;
                height: auto;
                min-height: 100%;
                background-color: #ccc;
            }
            .picwrapper ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .picwrapper li {
                float: left;
                width: 250px;
                margin-right: 20px;
            }
            .itemwrapper {
                box-shadow: 0px 0px 3px #666;
                -webkit-box-shadow: 0px 0px 3px #666;
                width: 100%;
                overflow: hidden;
                margin: 0px;
                padding: 0px;
                margin: 0px 20px 20px 0px;
                height: auto;
            }
            .picwrapper li img {
                width: 250px;
            }
            .picwrapper .tip {
                width: 100%;
                height: auto;
                background-color: white;
                text-align: left;
                text-indent: 1em;
                padding: 5px 10px;
                margin-top: -5px;
            }
            .loading {
                position: fixed;
                background: url(http://pingfan1990.sinaapp.com/javacript/wall/images/loading.gif)
                    no-repeat center center;
                width: 100%;
                height: 50px;
                text-align: center;
                bottom: 0px;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class=”wrapper”>
            <h1>Waterflow</h1>
            <div class=”picwrapper”>
                <ul id=”list”>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class=”loading” id=”loading”></div>
        <script>
            ;(function(global) {
                var $$ = function(id) {
                    return document.getElementById(id)
                }
                function jsonpImg() {
                    this.url = ‘http://annweb.sinaapp.com/img/’
                    this.list = $$(‘list’).getElementsByTagName(‘li’)
                    this.loading = $$(‘loading’)
                    this.cur = 0 //下标指针
                    this.loadNum = 8 //加载量
                }
                jsonpImg.prototype = {
                    addImg /*添加新的图片*/: function(data, container) {
                        var div = document.createElement(‘div’),
                            info = document.createElement(‘div’),
                            img = document.createElement(‘img’)
                        div.className = ‘itemwrapper’
                        img.src = this.url + data.src //图片
                        info.innerHTML = data.info
                        console.log(info)
                        info.className = ‘tip’
                        div.appendChild(img)
                        div.appendChild(info)
                        container.appendChild(div) //一个图片单元添加到List里面
                    },
                    jsonpAjax: function(url, callback) {
                        var script = document.createElement(‘script’)
                        script.src = url + ‘?callback=’ + callback
                        document
                            .getElementsByTagName(‘head’)[0]
                            .appendChild(script) //添加到head中
                    },
                    appendData: function(data) {
                        var jsonData = eval(‘(‘ + data + ‘)’)
                        for (var i = 0; i < this.loadNum; i++) {
                            var min_index = this.getMinList() //最短的那一列
                            this.addImg(jsonData[i], this.list[min_index])
                        }
                    },
                    getMinList /*返回高度最短的序列*/: function() {
                        var arr = []
                        for (var i = 0; i < this.list.length; i++) {
                            arr[i] = this.list[i].offsetHeight
                        }
                        arr.sort(function compare(a, b) {
                            return a – b
                        }) //升序排列
                        for (var j = 0; j < this.list.length; j++) {
                            if (this.list[j].offsetHeight == arr[0]) {
                                return j
                            }
                        }
                    },
                    getScrollTop: function() {
                        return document.body.scrollTop > 0
                            ? document.body.scrollTop
                            : document.documentElement.scrollTop //返回滚动距离
                    },
                }
                global.$$ = $$
                global.jsonpImg = jsonpImg
            })(window)
            var jsonpInstance = new window.jsonpImg()
            window.onload = function() {
                jsonpInstance.jsonpAjax(
                    ‘http://annweb.sinaapp.com/pubuHandler.php’,
                    ‘jsonpInstance.appendData’,
                )
            }
            window.onscroll = function() {
                if (
                    document.documentElement.scrollHeight <=
                    document.documentElement.clientHeight +
                        jsonpInstance.getScrollTop()
                ) {
                    //滚动条滚动到了底部
                    jsonpInstance.loading.style.display = ‘block’ //显示加载条
                    //加载新的图片 利用jsonpAjax
                    setTimeout(function() {
                        jsonpInstance.loading.style.display = ‘none’ //隐藏加载条
                        jsonpInstance.jsonpAjax(
                            ‘http://annweb.sinaapp.com/pubuHandler.php’,
                            ‘jsonpInstance.appendData’,
                        )
                    }, 1000)
                } else {
                    jsonpInstance.loading.style.display = ‘none’
                }
            }
        </script>
    </body>
</html>
游戏开发 前端引擎
游戏开发和前端开发哪个好
棋牌游戏开发前端
» 本文来自:前端开发者 » 《前端开发瀑布流Rewrite》
» 本文链接地址:https://www.rokub.com/7628.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!