瀑布流布局js

<!DOCTYPE html>
<html>
<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: "http://cued.xunlei.com/demos/publ/img/",
        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>

瀑布流布局js的更多相关文章

javascript实例学习之五——瀑布流布局
瀑布流布局的特征: 1,各列的高度参差不齐 2,页面向下滚动时,自动请求和加载新数据目前,瀑布流布局的主流实现方式有两种: 1,基于浮动,每一列是一个ul,这些ul都向左浮动,这种方法的好处是布局容 ...
JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

随机推荐

python创建文件
创建文件: 1. os.mknod(“test.txt”) 创建空文件 2. open(“test.txt”,w) 直接打开一个文件,如果文件不存在则创建文件 import os def mkdir_ ...
jquery 插件2014
jquery Plugins:http://plugins.jquery.com/ Amazon Side Bar Menu http://plugins.jquery.com/amazonsideb ...
caj转pdf——包含下载链接
很多人在知网上下载论文后,想转换成PDF格式,本片一站式教学,包含下载链接. 需要工具 1 caj格式的文件,即要转换的文件. 2 cajviewer,可以在知网的官网上面下载,下载地址参考这里. 3 ...
Ubuntu18安装sublime 3
转自 https://blog.csdn.net/qq_41590417/article/details/80461075 wget -qO - https://download.sublimetex ...
Vue的响应式原理
Vue的响应式原理一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实 ...
JSON WEB TOKEN 从原理到实战
阅读本文大概需要 4.2 分钟. 作者:王廷骏原文:https://juejin.im/post/5ce272c1e51d45109b01b0f8 1. JSON WEB TOKEN 1.1 什么是J ...
Poj 2947 widget factory (高斯消元解同模方程)
题目连接: http://poj.org/problem?id=2947 题目大意: 有n种类型的零件,m个工人,每个零件的加工时间是[3,9],每个工人在一个特定的时间段内可以生产k个零件(可以相同 ...
_bzoj1001 [BeiJing2006]狼抓兔子【平面图】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1001 顺便推荐一个ppt,里面有对平面图的介绍:浅析最大最小定理在信息学竞赛中的应用. 这里 ...
bzoj2581 [USACO 2012 Jan Gold] Cow Run【And-Or Tree】
传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=110 传送门2:http://www.lydsy.com/JudgeOn ...
jsp错误处理
jsp提供了很好的错误能力,除了在java代码中可以使用try语句,还可以指定一个特殊页面,当页面应用遇到未捕获的异常时,用户将看到一个精心设计的网页解释发生了什么,而不是一个用户无法理解的错误信息. ...

瀑布流布局js

瀑布流布局js的更多相关文章

随机推荐

热门专题