瀑布流的实践1

根据张鑫旭的http://www.zhangxinxu.com/wordpress/2012/03/%E5%A4%9A%E6%A0%8F%E5%88%97%E8%A1%A8%E5%8E%9F%E7%90%86%E4%B8%8B%E5%AE%9E%E7%8E%B0%E7%9A%84%E7%80%91%E5%B8%83%E6%B5%81%E5%B8%83%E5%B1%80-waterfall-layout/

而来,我有修改他的代码,修改了他的refresh这部分代码。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>瀑布流布局测试</title>

<style>

body {

    background-color: #eee;

    font-size: 84%;

    text-align: justify;

}

.column {

    /*display: inline-block;*/

    vertical-align: top;

    margin:0 5px;

    float: left;

}

.pic_a {

    display: block;

    padding: 5px;

    margin-bottom: 10px;

    border: 1px solid #ccc;

    background-color: #fff;

    text-decoration: none;

}

.pic_a img {

    display: block;

    margin: 0 auto 5px;

    border: 0;

    vertical-align: bottom;

}

.pic_a strong {

    color: #333;

}

</style>

</head>



<body>

<div id="container"></div>

<script type="text/javascript" src="http://a.tbcdn.cn/apps/tmm/activity/2013/0725seven_love/zepto.js"></script>

<script>

var waterFall = {

    container: document.getElementById("container"),

    // 栏的个数

    columnNumber: 1,

    // 栏的宽度

    columnWidth: 210,

    // 栏之间的margin

    columnMargin: 10,

    // P_001.jpg ~ P_160.jpg

    rootImage: "http://cued.xunlei.com/demos/publ/img/",

    // indexImage用来表示当前第几张图片

    indexImage: 0,



    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,

    detectLeft: 0,



    loadFinish: false,



    // 返回固定格式的图片名

    getIndex: function() {

        var index = this.indexImage;

        if (index < 10) {

            index = "00" + index;

        } else if (index < 100) {

            index = "0" + index;

        }

        return index;

    },



    // 是否滚动载入的检测

    appendDetect: function() {

        var start = 0;

        for (start; start < this.columnNumber; start++) {

            var eleColumn = document.getElementById("waterFallColumn_" + start);

            if (eleColumn && !this.loadFinish) {

                if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {

                    this.append(eleColumn);

                }

            }

        }



        return this;

    },



    // 滚动载入

    append: function(column) {

        this.indexImage += 1;

        var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg";



        // 图片尺寸

        var aEle = document.createElement("a");

        aEle.href = "###";

        aEle.className = "pic_a";

        aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>';

        column.appendChild(aEle);



        if (index >= 160) {

            //alert("图片加载光光了!");

            this.loadFinish = true;

        }



        return this;

    },



    // 页面加载初始创建

    create: function() {

        // 根据刚进入页面时的浏览器宽度,分配栏的个数

        this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);



        // start是当前第几栏,作为循环的标志变量用;

        var start = 0, htmlColumn = '', self = this;

        for (start; start < this.columnNumber; start+=1) {

            htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+

                function() {

                    var html = '', i = 0;

                    for (i=0; i<5; i+=1) {

                        // self.indexImage用来表示当前第几张图片,通过 当前第几栏和栏数和栏数里面的第几张 来获取

                        self.indexImage = start + self.columnNumber * i;

                        var index = self.getIndex();

                        html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>';

                    }

                    return html;

                }() +

            '</span> ';

        }

        // waterFallDetect元素用来判断浏览器宽度变化,通过waterFallDetect元素的左偏移量来判断。

        htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';



        this.container.innerHTML = htmlColumn;



        this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;

        return this;

    },



    refresh: function() {

        var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;

        for (start; start < this.columnNumber; start++) {

            // span标签里面的所有anchor元素,并放入数组

            var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi);

            if (arrColumn) {

                maxLength = Math.max(maxLength, arrColumn.length);

                // arrTemp是一个二维数组

                arrTemp.push(arrColumn);

            }

        }



        // 需要重新排序

        var lengthStart, arrStart;

        for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {

            for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {

                if (arrTemp[arrStart][lengthStart]) {

                    arrHtml.push(arrTemp[arrStart][lengthStart]);

                }

            }

        }

        console.log(arrHtml)



        if(arrHtml && arrHtml.length !== 0 ){

            // 新栏个数

            this.columnNumber = Math.floor(document.body.clientWidth / (this.columnWidth+this.columnMargin));



            // 向下取整

            var new_arrHtml = [];

            for(var i=0; i < this.columnNumber; i++){

                // var new_arrHtml_arr = [];

                new_arrHtml.push([]);

            }

            for(var j=0, l = arrHtml.length; j< l; j++){

                // var j_new = j+1;

                var new_arrHtml_pos = j % this.columnNumber;

                new_arrHtml[new_arrHtml_pos].push(arrHtml[j]);

            }

            console.log(new_arrHtml);



            // 重新组装HTML

            var newStart = 0, htmlColumn = '', self = this, column_arr = [];

            for(var i=0, l= this.columnNumber; i < l; i++){

                htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ i +'" class="column" style="width:'+ this.columnWidth +'px;">'+

                new_arrHtml[i].join("") +

                '</span>';

                // console.log(new_arrHtml[i].join(""))

            }

            htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>';

            // debugger;

            this.container.innerHTML = htmlColumn;



            this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;



            // 检测

            this.appendDetect();



        }

        return this;

    },



    // 滚动加载

    scroll: function() {

        var self = this;

        window.onscroll = function() {

            // 为提高性能,滚动前后距离大于100像素再处理

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {

                self.scrollTop = scrollTop;

                self.appendDetect();

            }



        };

        return this;

    },



    // 浏览器窗口大小变换

    resize: function() {

        var self = this;

        window.onresize = function() {

            var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;

            if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 10) {

                // 检测标签偏移异常,认为布局要改变

                self.refresh();

            }

        };

        return this;

    },

    init: function() {

        if (this.container) {

            this.create().scroll().resize();

        }

    }

};

waterFall.init();

</script>

</body>

</html>

 

你可能感兴趣的:(瀑布流)