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

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

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. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  2. 【开源】分享2011-2015年全国城市历史天气数据库【Sqlite+C#访问程序】

    由于个人研究需要,需要采集天气历史数据,前一篇文章:C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子),介绍了基本的采集思路和核心代码,经过1个星期的采集,历史数据库 ...

  3. [C#] C# 知识回顾 - 表达式树 Expression Trees

    C# 知识回顾 - 表达式树 Expression Trees 目录 简介 Lambda 表达式创建表达式树 API 创建表达式树 解析表达式树 表达式树的永久性 编译表达式树 执行表达式树 修改表达 ...

  4. EC笔记：第4部分：20、传递引用代替传值

    考虑以下场景: #include <iostream> #include <string> using namespace std; struct Person { strin ...

  5. 免费道路 bzoj 3624

    免费道路(1s 128MB)roads [输入样例] 5 7 21 3 04 5 13 2 05 3 14 3 01 2 14 2 1 [输出样例] 3 2 04 3 05 3 11 2 1 题解: ...

  6. 灵魂宝石 bzoj 2663

    灵魂宝石(1s 128MB)soulgem [问题描述] "作为你们本体的灵魂,为了能够更好的运用魔法,被赋予了既小巧又安全的外形" 我们知道,魔法少女的生命被存放于一个称为灵魂宝 ...

  7. Oracle 列数据聚合方法汇总

    网上流传众多列数据聚合方法,现将各方法整理汇总,以做备忘. wm_concat 该方法来自wmsys下的wm_concat函数,属于Oracle内部函数,返回值类型varchar2,最大字符数4000 ...

  8. 在配有英特尔® Iris™ 显卡的系统上通过优化对 Just Cause 3 进行增强

    高端 PC 继续通过高性能显卡驱动桌面游戏. 一流的"梦想机器"基于第六代智能 英特尔® 酷睿™ 处理器i7-6700K等 CPU,通常与高端独立显卡配合使用以运行要求最严苛的游戏 ...

  9. [Top-Down Approach]Take Notes

    Computer Networking - A Top-Down Approach Six Edition Learn HTTP Using Browser and Proxy 2016-03-20 ...

  10. .Net Core 系列：1、环境搭建

    前言: 2016年6月28日微软宣布发布 .NET Core 1.0.ASP.NET Core 1.0 和 Entity Framework Core 1.0. .NET Core是微软在两年前发起的 ...