<!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 charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>瀑布流</title>
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no" name="format-detection">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/><style>*{margin: 0; padding: 0}
body {
        margin: 0; padding: 0;
        background-color: #eee;
        font-size: 84%;}
li,a{list-style: none;text-decoration: none;}.container{
        padding: 0 0.531rem;
        box-sizing:border-box;}.column:nth-child(even){
        float: right;}.column:nth-child(odd){
        float: left;}.pic_a {
        width: 100%;
        display: block;
        margin-bottom: 4%;
        background-color: #fff;
        border-radius: 0.4rem;
        position: relative;
        padding-bottom: 0.938rem;} .list_img {
        display: block;
        margin-bottom: 0.531rem;
        vertical-align: bottom;}.list_img,.list_img img{
        width: 100%;
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        -webkit-border-top-left-radius: 0.4rem;
        -webkit-border-top-right-radius: 0.4rem;
        -moz-border-radius-topleft: 0.4rem;
        -moz-border-radius-topright: 0.4rem;}.com_des {
        display: block;
        color: #333;
        font-size: 0.640rem;
        padding: 0 0.469rem;
        line-height: 0.906rem;
        max-height: 1.800rem;
        overflow: hidden;
        font-weight: normal;}.peo_like{
        display: block;
        height: 0.938rem;
        max-width: 5rem;
        overflow: hidden;
        padding: 0 0.219rem;
        color: #fff;
        font-size: 0.640rem;
        background: #0094ff;
        border-radius: 0.2rem;
        position: absolute;
        top: 0.625rem;
        left: -0.156rem;}.angel{
        display: block;
        width: 0.188rem;
        height: 0.281rem;
        position: absolute;
        top: 1.3rem;
        left: -0.156rem;}.user_int{
        height: 1.375rem;
        display: -webkit-box;
        margin-top: 0.688rem;
        padding: 0 0.469rem;
        position: relative;}.user_int i,.user_int i img{
        display: block;
        height: 1.375rem;
        width: 1.375rem;
        border-radius: 100%;}.user_int span{
        display: block;
        width: 5.875rem;
        height: 1.375rem;
        line-height: 1.375rem;
        font-size: 0.747rem;
        color: #999;
        padding-left: 0.500rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;}.user_int b{
        display: block;
        width: 0.969rem;
        height: 0.844rem;
        position: absolute;
        right: 0.469rem;
        top: 0.2rem;}.user_int b img{
        width: 0.969rem;
        height: 0.844rem;}</style></head> <body><div id="container" class="container">
       
</div><script>var waterFall = {
        container: document.getElementById("container"),
        columnNumber: 1,
        columnWidth: document.body.clientWidth/2-12,         // 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 = '<p class="list_img"><img src="'+ imgUrl +'" /></p><strong class="com_des">'+ index +'</strong><span class="peo_like">2010人喜欢</span><span class="angel"><img src="data:images/1.5_angel.png"></span><div class="user_int"><i><img src="data:images/640.jpg"></i><span>我来自北方小城你来自哪里呢</span><b><img src="data:images/1.5_xin.png"></b></div>';
                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"><p class="list_img"><img src="'+ self.rootImage + "P_" + index +'.jpg" /></p><strong class="com_des">'+ index +'</strong><span class="peo_like">2010人喜欢</span><span class="angel"><img src="data:images/1.5_angel.png"></span><div class="user_int"><i><img src="data:images/640.jpg"></i><span>我来自北方小城你来自哪里呢</span><b><img src="data:images/1.5_xin.png"></b></div></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>

H5瀑布流如何实现的更多相关文章

  1. h5的瀑布流

    <!doctype html><html><head><meta charset="utf-8"><title>超简易瀑 ...

  2. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  3. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 比较容易理解的---原生js瀑布流

    最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...

  5. jQuery 实现的瀑布流

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  6. 手摸手,带你实现移动端H5瀑布流布局

    移动端瀑布流布局是一种比较流行的网页布局方式,视觉上来看就是一种像瀑布一样垂直落下的排版.每张图片并不是显示的正正方方的,而是有的长有的短,呈现出一种不规则的形状.但是它们的宽度通常都是相同的 因为移 ...

  7. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

  8. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  9. CollectionView水平和竖直瀑布流的实现

    最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...

随机推荐

  1. PHP之初识PHP(1)

    酸菜记 之 初识PHP 这是我从零基础了解PHP开始学习的笔记,共同学习,有不对之处,望指出共同学习. 一.初了解PHP PHP 是超文本预处理语言 php HyperText Preprocesso ...

  2. hdu 5901 Count primes

    题意: 计数区间$[1, n](1 \leq n \leq 10^{11})$素数个数. 分析: 这里只介绍一种动态规划的做法. 首先要说一下[分层思想]在动态规划中非常重要,下面的做法也正是基于这一 ...

  3. NPOI 教程 - 2.1单元格合并

    来源:http://liyingchun343333.blog.163.com/blog/static/3579731620091018212990/ 合并单元格在制作表格时很有用,比如说表格的标题就 ...

  4. nodejs路由的部分通配

    1. 占位标识符/:id app.get('/post_api_post_data_ren/bet/follow/:gameEn',function(req,res){ console.log(req ...

  5. NPOI导入xls,xlsx格式实例

    NPOI DLL下载地:http://npoi.codeplex.com/releases using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; us ...

  6. 详解MVC设计模式

    1 MVC介绍 众所周知MVC不是设计模式,是一个比设计模式更大一点的模式,称作设计模式不合理,应该说MVC它是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种:Observer (观 ...

  7. 常用js方法

    function dateGetter(name, size, offset, trim) { offset = offset || 0; return function (date) { var v ...

  8. js基础:函数表达式和函数声明

    函数表达式和函数声明的区别.实际上,解析器在向执行环境中加载数据是,对函数表达式和函数声明并非一视同仁.解析器会率先读取函数声明,并使其在执行任何代码之前可用.而函数表达式,则必须等到解析器执行到它所 ...

  9. [Amazon] Amazon IAP for Unity

    1> 下载amazon IAP3.0 for unity plugin 2> 根据 https://developer.amazon.com/public/apis/earn/in-app ...

  10. 关于json-p

    关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...