JS瀑布流布局

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

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

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瀑布流布局的更多相关文章

JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
JS瀑布流布局模式(2)
这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效,各个列的图高度差异不大. ...
JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
瀑布流布局js
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

随机推荐

css中的浮动与三种清除浮动的方法
说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...
JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...
dubbox微服务实例及引发的“血案”
Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成. 主要核心部件: Remoting: 网络通信框架 ...
vmware上网的方式
vmware上网设置 vmware虚拟机上网设置我的一些心得,如下: 如何使vmware虚拟机中的操作系统能够上网? 第一种情况: 主机使用PPPOE拨号上网方法一:NAT方式 1.先关闭虚拟机中 ...
【HanLP】HanLP中文自然语言处理工具实例演练
HanLP中文自然语言处理工具实例演练作者:白宁超 2016年11月25日13:45:13 摘要:HanLP是hankcs个人完成一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环 ...
Java FtpClient 实现文件上传服务
一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...
【JS基础】对象
delete 可以删除对象属性及变量 function fun(){ this.name = 'mm'; } var obj = new fun(); console.log(obj.name);// ...
RMS:不能对生产服务器使用测试清单
问题说明:在使用office软件RMS加密时报:不能对生产服务器使用测试清单,或者使用 rmsbulk.exe进行RMS加密时,报不能连接到RMS服务器. 解决办法: 请到https://suppor ...
如何区别exists与not exists?
1.exists:sql返回结果集为真:not exists:sql不返回结果集为真.详解过程如图: exists not exists
【每日一linux命令2】命令执行顺序：
二.命令顺序: 若在 shell 内置的命令/bin 以及/usr/bin 之下都出现了命令 pwd,那当我们执行该命令时,会执行哪一个?答案是第一优先执行 shell 内置的命令,再执行路 ...

JS瀑布流布局

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

随机推荐

热门专题