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

随机推荐

shell变量
定义变量定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样.同时,变量名 ...
javascript：逆波兰式表示法计算表达式结果
逆波兰式表示法,是由栈做基础的表达式,举个例子: 5 1 2 + 4 * + 3 - 等价于 5 + ((1 + 2) * 4) - 3 原理:依次将5 1 2 压入栈中, 这时遇到了运算符 + ...
vs15 preview5 离线安装包
1.介绍 vs15是微软打造的新一代IDE,全新的安装方式.官网介绍如下(https://blogs.msdn.microsoft.com/visualstudio/2016/10/05/announ ...
[数据结构]——链表(list)、队列(queue)和栈(stack)
在前面几篇博文中曾经提到链表(list).队列(queue)和(stack),为了更加系统化,这里统一介绍着三种数据结构及相应实现. 1)链表首先回想一下基本的数据类型,当需要存储多个相同类型的数据 ...
jQuery个性化图片轮播效果
jQuery个性化图片轮播效果购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始两个区域: ...
BPM的魅力何在？
BPM(Business Process Management , 企业流程管理平台) 是带动企业流程自动化的帮手,也是最能忠实反应出企业作业流程问题症结的系统工具,在管理上,BPM可以让管理者利用 ...
流程表单中js如何清空SheetUser控件数据？
昨天有人问我js怎么清空.我试了试,发现简单的赋给他空值,并没有用.只能给他赋一个真实存在的值才有用.于是跟踪了一下他的删除按钮. 效果如下使用场景:可以根据字段的不同类别变更人员. js代码如下, ...
Microsoft Visual Studio 2017 for Mac Preview 下载+安装+案例Demo
目录: 0. 前言 1. 在线安装器 2. 安装VS 3. HelloWorld 4. ASP.NET MVC 5. 软件下载 6. 结尾 0. 前言: 工作原因,上下班背着我的雷神,一个月瘦了10斤 ...
SQL数据类型
1.Character 字符串: 数据类型描述存储 char(n) 固定长度的字符串.最多8,000个字符. n varchar(n) 可变长度的字符串.最多8,000个字符. varchar ...
Configure a bridge interface over a VLAN tagged bonded interface
SOLUTION VERIFIED February 5 2014 KB340153 Environment Red Hat Enterprise Linux 6 (All Versions) Red ...

JS瀑布流布局

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

随机推荐

热门专题