好久没有更新博客喽，今天来说一个瀑布流布局。

瀑布流在很多网站已有很多，现在只说一下简单的实现原理吧，

1、计算一行可以排放几个元素

2、建立一个数组用于存放第一行的每个元素的高度。

3、得到数组中的最少值和索引

4、设置第二行的第一个元素的TOP值为数组中的最小值，同时设置它的LEFT值为第一行索引元素的LEFT值

5、将数组为索引值的元素设置为(第四条中的top值加它的高度)

效果如下图：

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: ;

            padding: ;

        }

        #main {

            position: relative;

        }

        .box {

            padding: 15px   15px;

            float: left;

        }

        .pic {

            padding: 10px;

            border: 1px solid #ccc;

            border-radius: 5px;

            box-shadow: 0px 0px 5px #ccc;

        }

    </style>

</head>

<body>

<div id="main">

    <div class="box">

        <div class="pic">

            <img src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/01.jpg"

                 alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/02.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/03.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/04.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/05.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/06.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/07.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/10.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

    <div class="box">

        <div class="pic">

            <img

                    src="http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/09.jpg"

                    alt=""/>

        </div>

    </div>

</div>

</body>

<script>

    window.onload = function () {

        waterfall('main', 'box');

        var data = {'data': [

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/11.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/12.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/14.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/15.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/01.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/10.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/02.jpg'},

            {'src': 'http://www.17sucai.com/preview/1/2013-05-06/%E7%80%91%E5%B8%83%E6%B5%81/images/pic/03.jpg'}

        ]};

        window.onscroll = function () {

            if (checkScrollSlide()) {

                var oParent = document.getElementById('main');

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

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

                    tBox.className = 'box';

                    oParent.appendChild(tBox);

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

                    tPic.className = 'pic';

                    tBox.appendChild(tPic);

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

                    tImg.src = data.data[i].src;

                    tPic.appendChild(tImg);

                }

                waterfall('main', 'box');

            }

        };

    };

    function waterfall(parent, box) {

        var oParent = document.getElementById(parent);

        var oBoxs = getByClass(oParent, box);

        //计算列数

        var oBoxW = oBoxs[].offsetWidth;

        var cols = Math.floor(document.documentElement.clientWidth / oBoxW);

        //set main width

        //oParent.style.width=cols*oBoxW+'px';

        oParent.style.cssText = 'width:' + cols * oBoxW + 'px;margin:0 auto;';

        var hArr = [];

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

            if (i < cols) {

                hArr.push(oBoxs[i].offsetHeight);

            } else {

                var minH = Math.min.apply(null, hArr);

                var index = getArrayIndex(hArr, minH);

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

                oBoxs[i].style.top = minH + 'px';

                oBoxs[i].style.left = oBoxs[index].offsetLeft + 'px';

                //主要用于进行替换位置数组中高度 让以后的图片进行按这个高度

                //进行排序

                hArr[index] = minH + oBoxs[i].offsetHeight;

            }

        }

    }

    function getByClass(parent, clsName) {

        var boxArray = new Array();

        var oElements = parent.getElementsByTagName('*');

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

            if (oElements[i].className == clsName) {

                boxArray.push(oElements[i]);

            }

        }

        return boxArray;

    }

    function getArrayIndex(arrayy, val) {

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

            if (arrayy[i] == val) {

                return i;

            }

        }

    }

    function checkScrollSlide() {

        var oParent = document.getElementById('main');

        var oBoxs = getByClass(oParent, 'box');

        var lastBoxH = oBoxs[oBoxs.length - ].offsetTop + Math.floor(oBoxs[oBoxs.length - ].offsetHeight);

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

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

        return lastBoxH < scrollTop + height;

    }

</script>

</html>

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

  1. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  2. JS瀑布流布局模式(1)

    在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...

  3. JS瀑布流布局模式(2)

    这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效,各个列的图高度差异不大. ...

  4. JS案例之6——瀑布流布局(1)

    在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...

  5. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  6. js网页瀑布流布局

    瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...

  7. 瀑布流布局js

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  8. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  9. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

随机推荐

  1. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  2. CRL快速开发框架系列教程五(使用缓存)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  3. FullCalendar日历插件说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  4. 易用BPM时代，软件开发者缘何选择H3？

    近年来,企业级软件开发市场暗流汹涌,呈现出多种态势.软件开发团队规模趋于小型化,工作方式趋于快捷化,超过半数的软件开发者在工作中会选择使用易用的软件开发工具.随着流程管理越来越受到企业的重视,流程开发 ...

  5. BPM端到端流程解决方案分享

    一.需求分析 1.企业规模的不断发展.管理水平的不断提升,通常伴随着企业各业务板块管理分工更细.更专业,IT系统同样越来越多.越来越专 业化.不可避免的,部门墙和信息孤岛出现了,企业的流程被部门或者I ...

  6. Android中的沉浸式状态栏效果

    无意间了解到沉浸式状态栏,感觉贼拉的高大上,于是就是试着去了解一下,就有了这篇文章.下面就来了解一下啥叫沉浸式状态栏.传统的手机状态栏是呈现出黑色条状的,有的和手机主界面有很明显的区别.这一样就在一定 ...

  7. MongoDB学习笔记四—增删改文档下

    $slice 如果希望数组的最大长度是固定的,那么可以将 $slice 和 $push 组合在一起使用,就可以保证数组不会超出设定好的最大长度.$slice 的值必须是负整数. 假设$slice的值为 ...

  8. ORA-00821: Specified value of sga_target 3072M is too small, needs to be at least 12896M

    在测试PlateSpine克隆的数据库服务器时,由于资源有限,克隆过来的数据库服务器只给了9G的内存,结果在测试时,老是会出现OOMkiller导致宕机,即out of memory killer,是 ...

  9. 【一起学OpenFoam】01 OpenFoam的优势

    CFD技术发展到今天,已经超过了大半个世纪了,已经涌现出非常多的CFD软件可供人们使用.通用商业CFD软件譬如Fluent.CFX.Star CCM+等在工业上得到了广泛的应用,另外一些专用的软件(如 ...

  10. Ubuntu1604下安装Liggghts及CFDEM Coupling

    部分内容参考http://www.linuxdiyf.com/linux/16315.html LIGGGHTS是一款开源的DEM软件,来自于著名的分子动力学软件LAMMPS,目前借助于CFDEM C ...