js实现瀑布流的一种简单方法实例分享


Posted in Javascript onNovember 04, 2013

下面奉上一则用JS实现瀑布流的方法,望批评。

<!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,
    // 返回固定格式的图片名
    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);
        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;
    },
    // 浏览器窗口大小变换
    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) {
                // 检测标签偏移异常,认为布局要改变
                self.refresh();    
            }
        };
        return this;
    },
    init: function() {
        if (this.container) {
            this.create().scroll().resize();    
        }
    }
};
waterFall.init();
</script>
</body>
</html>
Javascript 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
lib.utf.js
Aug 21 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
vue 组件简介
Jul 31 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
浅析return false的正确使用
Nov 04 #Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 #Javascript
js中apply方法的使用详细解析
Nov 04 #Javascript
js数组操作学习总结
Nov 04 #Javascript
You might like
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
php实现通过ftp上传文件
2015/06/19 PHP
PHP微信API接口类
2016/08/22 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
popdiv
2006/07/14 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
毕业证明书
2015/06/19 职场文书