Example sharing of a simple method to implement waterfall flow in js

Home

Web Front-end

JS Tutorial

Example sharing of a simple method to implement waterfall flow in js_javascript skills

May 16, 2016 pm 05:17 PM

js Waterfalls flow

The following is a method of implementing waterfall flow using JS. I hope you will criticize.

Copy code The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流布局测试</title>
<style>
body {
    background-color: #eee;
    font-size: 84%;
    text-align: justify;
}
.column {
    display: inline-block;
    vertical-align: top;
}
.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>
var waterFall = {
container: document.getElementById("container"),
columnNumber: 1,
columnWidth: 210,
// P_001. jpg ~ P_160.jpg
rootImage: "test/",
indexImage: 0,

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

loadFinish: false,

// Return the fixed format image name
getIndex: function() {
var index = this.indexImage;
if (index &lt ; 10) {
                index = "00" index;                                                                                                                                   🎜> },

// Detection of scrolling loading
appendDetect: function() {
var start = 0;
for (start; start < this.columnNumber; start ) {
var eleColumn = document.getElementById("waterFallColumn_" start);
if (eleColumn && !this.loadFinish) {
eleColumn.offsetTop eleColumn.clientHeight & lt; this.scrollTop (window.innerHeight | | document.documentElement.clientHeight)) {
this.append(eleColumn);
}
} }
}

return this;
},

// Scroll loading
append: function(column) {
this.indexImage = 1;
var html = '', index = this.getIndex(), imgUrl = this.rootImage "P_" index ".jpg";

// Image size
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("The picture is loading!");
            this.loadFinish = true;
        }

        return this;
    },

    // 页面加载初始创建
    create: function() {
        this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);

        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 = 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> ';
        }
        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 =1) {
            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]);
                }
            }
        }


        if (arrHtml && arrHtml.length !== 0) {
            // 新栏个数
            this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);

            // 计算每列的行数
            // 向下取整
            var line = Math.floor(arrHtml.length / this.columnNumber);

            // 重新组装HTML
            var newStart = 0, htmlColumn = '', self = this;
            for (newStart; newStart < this.columnNumber; newStart =1) {
                htmlColumn = htmlColumn '<span id="waterFallColumn_' newStart '" class="column" style="width:' this.columnWidth 'px;">'
                    function() {
                        var html = '', i = 0;
                        for (i=0; i<line; i =1) {
                            html = arrHtml[newStart self.columnNumber * i];
                        }
                        // 是否补足余数
                        html = html (arrHtml[newStart self.columnNumber * line] || '');

                        return html;
                    }()
                '</span> ';
            }
            htmlColumn = '<span id="waterFallDetect" class="column" style="width:' this.columnWidth 'px;"></span>';

            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;
    },

// Browser window size change
resize: function() {
var self = this;
window.onresize = function() {
var eleDetect = document. getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
// Detect label offset abnormality, consider layout To change
if (this.container) {
this.create().scroll().resize();
}
}
};
waterFall.init();
</script>
</body>
</html>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn