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. 铁乐学python_md5校验两个文件的一致性

    # 写一个函数,参数是两个文件的路径 # 返回的结果是T/F # 判断两个文件的md5值是否相同 import hashlib def diff_md5(file1,file2): def chick ...

  2. ZT 类模板Stack的实现 by vector

    *//*第3章 类模板 与函数相似,类也可以被一种或多种类型参数化.容器类就是一个具有这种特性的典型例子,它通常被用于管理某种特定类型的元素.只要使用类模板,你就可以实现容器类,而不需要确定容器中元素 ...

  3. kudu安装部署

    安装部署节点规划 节点 kudu-master kudu-tserver node01 是 是 node02 是 是 node03 是 是 配置本地Yum的Repository 下载kudu安装yum ...

  4. Keepalived + haproxy双机高可用方案

    上一篇文章已经讲到了keepalived实现双机热备,且遗留了一个问题 master的网络不通的时候,可以立即切换到slave,但是如果只是master上的应用出现问题的时候,是不会 主动切换的. 上 ...

  5. JXL API总结

    API参考: http://www.andykhan.com/jexcelapi/index.html 官网: http://jexcelapi.sourceforge.net/ 1. 创建可写的工作 ...

  6. Servlet 启动顺序

    在servlet的配置当中,<load-on-startup>1</load-on-startup>的含义是: 标记容器是否在启动的时候就加载这个servlet. 当值为0或者 ...

  7. centos安装不上的问题

    Installing VMware Tools, please wait...mount: special device /dev/hda does not existmount: block dev ...

  8. HDU4513:完美队形II(Manacher)

    Description Input Output Sample Input   Sample Output   Solution 才发现我之前不会证$Manacher$复杂度……QAQ 题意是求最长向 ...

  9. java基础集合类——ArrayList 源码略读

    ArrayList是java的动态数组,底层是基于数组实现. 1. 成员变量 public class ArrayList<E> extends AbstractList<E> ...

  10. 20145203JAVA课程总结

    20145203盖泽双 <Java程序设计>课程总结 课程总结 (按顺序)每周读书笔记链接汇总 调查问卷:http://www.cnblogs.com/GZSdeboke/p/524832 ...