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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
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开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
win与linux系统中python requests 安装
2016/12/04 Python
Flask框架信号用法实例分析
2018/07/24 Python
python实现贪吃蛇游戏
2020/03/21 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python设计密码强度校验程序
2020/07/30 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
文科生自我鉴定
2014/02/15 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
县委务虚会发言材料
2014/10/20 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript