css3属性之多栏布局与JS实现瀑布流

　　　背景：之前打算自己总结一下flex布局的知识点，发现自己无从下手，原因在何处：我反思了一下，其实原因很简单，使用的次数少，更多的时间使用了百分比，浮动和定位解决。这也就显示出了博客和笔记的区别，自己平时做笔记，更多的记录，而不是总结，其实自己没有熟练掌握。

　　有的时候甚至出现了这样的笔记：

　我打算坚持写博客，不论自己总结有多么差劲，也要坚持写，哪怕几年后我看到以前的笔记，自己会偷偷笑出声。想想原来大一时的技术还是那样的稚嫩啊。

Css3多列

　　1）首提的兼容性问题：IE10以及opera支持多列（column），chrome需要-webkit-前缀，Firefox需要-moz-的前缀，Ie9以及更早版本就不支持多列了。你可以使用这个工具，很方便的查看你的浏览器内核以及版本信息http://ie.icoa.cn/

　　2）Css3多列属性:css3多列主要是五个属性

column-count　　 <规定元素被分隔的列数>

column-gap　　　 <规定列与列之间的间隔>

column-rule　　    <列之间的宽度、样式、颜色>

column-width        <列的宽度>

column-span         <元素应该横跨的列数>

　注意：在设置column-width宽度时，同时设置盒子的width，否则宽度默认为100%，每栏宽度按栏数平均分；盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度

css3多列和JS实现瀑布流

　给自己安利一波吧，看到网上很多瀑布流的效果，哇，简直棒极了有没有；于是我迫不及待的打开vpn，打开了pinterest的官网。

自己也梳理梳理逻辑：<在写js代码之前，一定要先搞清逻辑，再动手写代码>

我们都不陌生瀑布流是同宽的，但是高度不一，js主要的工作就是根据高度来进行布局，

1）当一行排满后，准备排第二行的时候，把第一个图片放到上一行图片高度最小处，以此类推，

另外有一点就是自动加载，这里我做一个条件来判断是否加载，

2）当最后一个的元素距离网页顶部的高度（offsetTop）+ 这个元素高度的一半 < 垂直方向上滚轮的量（scrollTop） + 网页可见区域的高 时：

我们就加载图片（这里我没有用ajax请求，我用了一个json数组来模拟json数据）

要搞清楚offsetTop、scrollTop、clientHeight这些的具体含义：可以参考前辈的博客。

梳理完逻辑，让我们动手写代码吧：

　　html比较简单，这里图片我用了placehold的图片占位符，如果你没有很好的素材，这也许是个不错的选择

<body>

<div class="main clearfix" id="main">

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x200"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x200"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x150"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x200"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x200"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x200"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x100"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x150"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x200"/></div>

    </div>

    <div class="box">

        <div class="pic"><img src="http://placehold.it/200x300"/></div>

    </div>

</div>

　　css用了多列的column-width和column-gap属性

* {

            margin:;

            padding:;

        }

        .clearfix:after,

        .clearfix:before {

            content: "";

            display: table;

        }

        .clearfix:after {

            clear: both;

        }

        .main {

            position: relative;

            -webkit-column-width: 210px;

            -webkit-column-gap: 5px;

            -moz-column-gap: 5px;

        }

        .box {

            float: left;

            padding: 15px 0 0 15px;

        }

        .box .pic {

            width: 200px;

            height: auto;

            padding: 10px;

            border-radius: 10px;

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

        }

        .box .pic img {

            display: block;

            width: 100%;

        }

　　梳理完了逻辑，该动手写js了

 window.onload = function () {

            waterfall('main', 'box');

            var ImgJson = {

                'data': [

                    {'src': 'http://placehold.it/200x300'}

                ]

            };

            //监听scroll事件

            window.onscroll = function () {

                var isPosting = false;

                if (checkScrollSlide('main', 'box') && !isPosting) {

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

                    for (var i in ImgJson.data) {

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

                        oBox.className = 'box';

                        oBox.innerHTML = '<div class="pic"><img src="' + ImgJson.data[i].src + '"></div>';

                        oParent.appendChild(oBox);

                    }

                    isPosting = false;

                    waterfall('main', 'box');

                }

            }

        };

        function waterfall(parent, clsName) {

            //获取元素

            var oParent = document.getElementById(parent);

            //获取所有box

            var aBoxArr = oParent.getElementsByClassName(clsName);

            //单个box的宽度

            var iBoxw = aBoxArr[0].offsetWidth;

            //列数

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

            oParent.style.cssText = 'width:' + iBoxw * (cols + 1) + 'px;margin:0 auto;';

            //储存所有高度

            var hArr = [];

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

                if (i < cols) {

                    hArr[i] = aBoxArr[i].offsetHeight;

                } else {

                    //获取hArr的最小值

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

                    //hArr最小值索引index

                    var minHIndex = getMinHIndex(hArr, minH);

                    aBoxArr[i].style.cssText = 'position:absolute;top:' + minH + 'px;left:' + aBoxArr[minHIndex].offsetLeft + 'px';

                    //添加元素之后更新hArr

                    hArr[minHIndex] += aBoxArr[i].offsetHeight;

                }

            }

        }

        //获取最小索引值

        function getMinHIndex(arr, val) {

            for (var i in arr) {

                if (arr[i] == val) {

                    return i;

                }

            }

        }

        //检查是否满足加载数据的条件

        function checkScrollSlide(parent, clsName) {

            var oParent = document.getElementById(parent);

            var aBoxArr = oParent.getElementsByClassName(clsName);

            //最后一个box元素的offsetTop+高度的一半

            var lastBoxH = aBoxArr[aBoxArr.length - 1].offsetTop + aBoxArr[aBoxArr.length - 1].offsetHeight / 2;

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

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

            return lastBoxH < scrollTop + height;

        }

　　最后走一波效果图

　　

多栏布局与JS实现瀑布流的更多相关文章

  1. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  2. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  3. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  4. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  5. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  6. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  8. js实现瀑布流以及加载效果

    一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinteres ...

  9. js实现瀑布流加载图片效果

    今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...

随机推荐

  1. Oracle恢复删除数据

    可以通过SCN和时间戳两种方法来恢复. 一.通过SCN恢复删除且已经提交的数据 查询当前SCN select current_scn from v$database; 如图: 缩小范围进行查询 查询到 ...

  2. IIS 7 反向代理 URL重写 转发动态请求

    一.反向代理是什么 有一篇文章说的挺好的 Nginx 反向代理.负载均衡.页面缓存.URL重写及读写分离详解 http://www.server110.com/nginx/201402/5534.ht ...

  3. rman恢复方案和oracle异机恢复

    这篇文章主要介绍了rman恢复方案和oracle异机恢复,需要的朋友可以参考下 注:①恢复的前提是已经做好备份②完全恢复数据库是数据库遇到故障,在恢复时候没有丢失任何已经提交事物数据的恢复不完全恢复数 ...

  4. Spring 容器介绍

    Spring 框架的实现依赖 IoC (反向控制) 原则,更为形象的称呼是 DI (依赖注入).相对于 Bean 直接构造依赖的对象,Spring 框架则根据 Bean之间的依赖关系创建对象,并注入到 ...

  5. Ceph块存储介绍

    1. 块存储是什么 块存储简称RBD(RADOS Block Device),是一种有序的字节序块,也是在Ceph三大存储类型中最为常用的存储方式 ,Ceph的块存储是基于RADOS的,因此它也借助R ...

  6. MySQL开发规范和原则大全

    一. 表设计 库名.表名.字段名必须使用小写字母,“_”分割. 库名.表名.字段名必须不超过12个字符. 库名.表名.字段名见名知意,建议使用名词而不是动词. 建议使用InnoDB存储引擎. 存储精确 ...

  7. js检测密码强度

    <script> function AuthPasswd(string) {     if(string.length >=6) {         if(/[a-zA-Z]+/.t ...

  8. 3192: [JLOI2013]删除物品

    3192: [JLOI2013]删除物品 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1366 Solved: 794 [Submit][Statu ...

  9. 配置网卡绑卡 --RHEL7

    配置网卡绑卡 1)网卡绑定(team方式) # 创建组接口nmcli connection add type team ifname team0 con-name team0 config '{&qu ...

  10. shell基础--字符串和变量的操作

    一．统计字符串长度 1.wc –L [root@~_~day4]# echo "hello" | wc -L 5 2.expr length string [root@~_~day ...