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/ ...

随机推荐

react-redux
1. 首先redux,与react是两个独立的个体,项目中可以只用react,也可以只用redux 1.1 react-redux: 是一个redux作者专门为react制作的 redux, 增加了新 ...
Http请求
HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. 请求报文一个HTTP请求报文由请求行(request line ...
java单向加密算法小结(2)--MD5哈希算法
上一篇文章整理了Base64算法的相关知识,严格来说,Base64只能算是一种编码方式而非加密算法,这一篇要说的MD5,其实也不算是加密算法,而是一种哈希算法,即将目标文本转化为固定长度,不可逆的字符 ...
dedecms 后台栏目添加图片
前台调用栏目时需要显示图标,整理一下: 第一步:“系统->SQL命令工具” , 插入sql语句 alter table dede_arctype add typeimg varchar() 第二 ...
xss和sql注入原理学习
8.4 Web跨站脚本攻击 8.4.1 跨站脚本攻击的原理(1) 跨站脚本在英文中称为Cross-Site Scripting,缩写为CSS.但是,由于层叠样式表 (Cascading Style ...
CentOS7之按时间段截取指定的Tomcat日志到指定文件的方法
CentOS7之按时间段截取指定的Tomcat日志到指定文件的方法 sed -n '/2016-11-02 15:00:/,/2016-11-02 15:05:/p' catalina.out > ...
MSSQL 事务，视图，索引，存储过程，触发器
事务事务是一种机制.是一种操作序列,它包含了一组数据库操作命令,这组命令要么全部执行,要么全部不执行. 在数据库系统上执行并发操作时事务是作为最小的控制单元来使用的.这特别适用于多用户同时操作的数据 ...
1 selenium3.0.1无法打开火狐浏览器
[问题描述] 1.配置selenium3.0和java后,尝试打开火狐浏览器,提示缺少geckodriver驱动. [解决方案] 1.在http://www.seleniumhq.org/downlo ...
subline text3 使用总结
安装:http://www.sublimetext.com/3 插件扩展: 安装package control组件按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入 ...
.NET Web的身份认证
百度一下”asp.net身份认证“,你会得到很多相关的资料,这些资料通常上来就会介绍诸如”Form认证“”Windows认证“等内容,而没有给出一个完整的流程.初学者对此往往一头雾水,我也曾经被坑过很 ...

JS瀑布流布局

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

随机推荐

热门专题