一、前言：

　　瀑布流现在是一个非常常用的布局方式了，尤其在购物平台上，例如蘑菇街，淘宝等等。

二、流程：

1、在html文件中写出布局的元素内容；

2、在css文件中整体对每一个必要的元素进行样式和浮动设置；

3、在js文件中动态实现布局，每一个滚动时，都要刷新布局。

三、思想：

实现瀑布流，就是每次当前一列的图片显示完全后，接着要显示下一列时，先找出最短的一列，然后将图片填充上，以此类推...

四、代码：

waterFlow.html:

<!DOCTYPE html>

<html lang="zh-en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流效果</title>

    <link rel="stylesheet" href="waterFlow.css">

    <script src="waterFlow.js" type="text/javascript"></script>

</head>

<body>

    <!--父盒子-->

    <div id="main">

         <!--子盒子-->

         <div class="box">

              <div class="pic">

                  <img src="data:images/0.png">

                  <div>

                      <span>喜欢:666</span>

                      <span>收藏:999</span>

                  </div>

              </div>

         </div>

        <div class="box">

            <div class="pic"><img src="data:images/1.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/2.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/3.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/4.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/5.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/6.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/7.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/8.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/9.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/10.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/11.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/12.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/13.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/14.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/15.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/16.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/17.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/18.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/19.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/20.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/21.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/22.png" alt=""></div>

        </div>

        <div class="box">

            <div class="pic"><img src="data:images/23.png" alt=""></div>

        </div>

    </div>

</body>

</html>

waterFlow.css:

*{

    padding:;

    margin:;

}

#main{

    /*定位*/

    position: relative;

}

.box{

   float: left;

   /*内边距*/

   padding: 15px 0 0 15px;

   /*background-color: red;*/

}

.pic{

    border:1px solid #dddddd;

    padding: 10px;

    background-color: white;

    border-radius: 5px;

}

.pic img{

    width: 165px;

}

waterFlow.js:

// ===  值比较  类型比较

function $(id) {

    return typeof id === 'string' ? document.getElementById(id) : id

}

// 当窗口加载完毕

window.onload = function () {

     // 瀑布流布局

     WaterFall('main', 'box');

     // 滚动加载盒子

     window.onscroll = function () {

         if(CheckWillLoad()){ // 具备滚动的条件

            // 造数据

            var dataArr = [{'src': '10.png'},{'src': '11.png'},{'src': '13.png'},{'src': '15.png'},{'src': '17.png'},{'src': '19.png'},{'src': '21.png'},{'src': '23.png'}];

            // 遍历

            for(var i=0; i<dataArr.length; i++){

                // 创建子盒子

                var newBox = document.createElement('div');

                newBox.className = 'box';

                $('main').appendChild(newBox);

                var newPic = document.createElement('div');

                newPic.className = 'pic';

                newBox.appendChild(newPic);

                var newImg = document.createElement('img');

                newImg.src = 'images/' + dataArr[i].src;

                newPic.appendChild(newImg);

            }

            // 重新实现瀑布流布局

           WaterFall('main', 'box');

         }

     }

};

// http://blog.sina.com.cn/s/blog_966e43000101bplb.html

// 瀑布流布局

function WaterFall(parent, child) {

    // ------ 父盒子居中

    // 1.1 拿到所有的子盒子

    var allBox = document.getElementsByClassName(child);

    // 1.2 求出其中一个盒子的宽度

    var boxWidth = allBox[0].offsetWidth;

    // 1.3 求出页面的宽度

    var clientWidth = document.body.clientWidth;

    // 1.4 求出列数

    var cols = Math.floor(clientWidth / boxWidth);

    // 1.5 父盒子居中 css赋值都是String类型

    $(parent).style.width = boxWidth * cols + 'px';

    $(parent).style.margin = '0 auto';

    // ------ 子盒子的定位

    // 1.1 定义高度数组

    var heightArr = [];

    // 1.2 遍历所有的盒子

    for(var i=0; i<allBox.length; i++){

        // 1.2.1 取出单个盒子的高度

        var boxHeight = allBox[i].offsetHeight;

        // 1.2.2 判断

        if(i < cols){ // 第一行

           heightArr.push(boxHeight);

        }else{ // 剩余的行

           // 取出数组中最矮的盒子的高度

           var minBoxHeight = Math.min.apply(this, heightArr);

           // 取出数组中最矮的盒子的索引

           var minBoxIndex = GetMinBoxIndex(heightArr, minBoxHeight);

           // 子盒子定位

           allBox[i].style.position = 'absolute';

           allBox[i].style.top = minBoxHeight +'px';

           allBox[i].style.left = boxWidth * minBoxIndex + 'px';

           // 更新数组中最矮盒子的高度

           heightArr[minBoxIndex] += boxHeight;

        }

    }

    // console.log(heightArr, minBoxHeight, minBoxIndex);

}

// 获取最矮盒子的索引

function GetMinBoxIndex(arr, value) {

    for(var i=0; i<arr.length; i++){

        if (arr[i] == value) return i;

    }

}

// 判断是否具备加载条件

function CheckWillLoad() {

    // 1.1 获取最后的一个盒子

    var allBox = document.getElementsByClassName('box');

    var lastBox = allBox[allBox.length - 1];

    // 1.2 求出高度的一半 + 头部偏离的高度

    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 1.3 求出页面的高度  JS存在兼容性问题 ---> 标准模式  混杂模式

    var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;

    // 1.4 求出页面偏离浏览器的高度

    var scrollTopHeight = document.body.scrollTop;

    // 1.5 判断返回

    return lastBoxDis <= clientHeight + scrollTopHeight;

}

五、效果图：

源码：http://files.cnblogs.com/files/XYQ-208910/waterFlow.zip

JavaScript：实现瀑布流的更多相关文章

  1. 使用原生javascript实现瀑布流

    简介 瀑布流布局是一种很常见的布局方式,他的主要视觉体验为图片元素等宽不等高,图片元素之间的水平排序参差不齐,而且随着滚动条的滚动,数据会进行异步的加载,这样的布局有两个好处,1-有视觉的冲击力,比较 ...

  2. JavaScript实现瀑布流

    前端内容: 使用JavaScript和四个div,将照片放入四个div中 <!DOCTYPE html> <html lang="en"> <head ...

  3. javascript实现瀑布流效果（固定宽度）

    HTML代码: <div id="content"> <div class="box"> <div class="img ...

  4. 9.Javascript原生瀑布流

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  5. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  6. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  7. javascript瀑布流

    哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还 ...

  8. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  9. JavaScript中作用域回顾（避免使用全局变量）（瀑布流的实现）（scroll事件）以及Django自定义模板函数回顾

    页面显示照片样式为瀑布流: 上面的div个数可以按照自己安排进行划分.img的分布可以使用模板标签以及自定义模板函数进行排布: 自定义模板函数实现可以看,最后几列:python---django中模板 ...

随机推荐

  1. [转] - JAR文件包及jar命令详解 ( MANIFEST.MF的用法 )

    常常在网上看到有人询问:如何把 java 程序编译成 .exe 文件.通常回答只有两种,一种是制作一个可执行的 JAR 文件包,然后就可以像. chm 文档一样双击运行了:而另一种是使用 JET 来进 ...

  2. shenyi 语录

    [讲师]沈逸(65480539) 2016-06-08 14:58:42   会centos 转redhat是分分钟的事 [讲师]沈逸(65480539) 2016-06-08 14:58:54 查看 ...

  3. JavaScript - 时间函数

    时间美化函数 /* 1.< 60s, 显示为“刚刚” 2.>= 1min && < 60 min, 显示与当前时间差“XX分钟前” 3.>= 60min &am ...

  4. 一个Java方法覆盖的小问题

    class SuperClass{ public SuperClass() { System.out.println("superclass "); show(); } publi ...

  5. [转]Web Service Authentication

    本文转自:http://www.codeproject.com/Articles/9348/Web-Service-Authentication Download source files - 45. ...

  6. Solr学习笔记之2、集成IK中文分词器

    Solr学习笔记之2.集成IK中文分词器 一.下载IK中文分词器 IK中文分词器 此文IK版本:IK Analyer 2012-FF hotfix 1 完整分发包 二.在Solr中集成IK中文分词器 ...

  7. PHP 命名空间总结

    PHP 5.3 及以上版本中引入了命名空间 的概念. notes: 1. 在 PHP 中,命名空间用来解决在编写 类库 或 应用程序 时创建 可重用 的 代码如 类 或 函数 时碰到的两类问题: ① ...

  8. WEB-INF目录下的jsp页面如何访问?

    只能在sevlet(或者spring的control,struts的action,本质都是sevlet)中访问也就是只能通过java后台访问,这里web-inf下的内容是不对外开放的/安全的,不能通过 ...

  9. eclipse SDK更新管理器安装插件

    1.在Eclipse的主菜单,点击help,选择Install New Software 2.Work with: Indigo - http://download.eclipse.org/relea ...

  10. TCP协议中的三次握手和四次挥手(图解)（转载http://blog.csdn.net/whuslei/article/details/6667471）

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源 ...