下午查找了瀑布流的相关原理，找了一些css3实现的还有js实现的，最后总结了一些比较简单的，易懂的整理起来

1.css3实现

只要运用到    column-count分列

　　　　　　column-width固定宽度

　　　　　　column-gap设置列间的间隔

　　　　　　break-inside：avoid防止换行

注意: Internet Explorer 9及更早 IE 版本浏览器不支持 column-count 属性。

下面是一个例子：

html代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>css3实现简单的瀑布流</title>

        <link rel="stylesheet" href="css/index.css" />

    </head>

    <body>

        <div class="container">

            <div class="waterfall">

                <div class="pin">

                    <img src="http://dummyimage.com/640x4:3" />

                    <p>1 convallis timestamp</p>

                </div>

                <div class="pin">

                    2 Donec a fermentum nisi.

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/640x3:4" />

                    <p>

                        3 Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://loremflickr.com/640/480/germany" />

                    <p>

                        4 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/480x4:3" />

                    <p>

                        5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/480x3:4" />

                    <p>

                        6 Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/640x21:10" />

                    <p>

                        7 Nullam eget lectus augue.

                    </p>

                </div>

                <div class="pin">

                    <p>

                        8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/800x4:3" />

                    <p>

                        9 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/900x4:2" />

                    <p>

                        10 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/640x5:4" />

                    <p>

                        11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://loremflickr.com/1024/768/cool" />

                    <p>

                        12 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/800x16:3" />

                    <p>

                        13 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://loremflickr.com/1024/768/vw,golf,variant/all" />

                    <p>

                        14 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/300x4:3" />

                    <p>

                        15 Nullam eget lectus augue.

                    </p>

                </div>

                <div class="pin">

                    <img src="http://dummyimage.com/640x16:9" />

                    <p>

                        16 Nullam eget lectus augue.

                    </p>

                </div>

            </div>

        </div>

    </body>

</html>

css代码：

body {

    background-color: #f6f6f6;

}

.container {

    width: 80%;

    margin: 0 auto;

}

.waterfall {

    -moz-column-count:;

    -webkit-column-count:;

    column-count:;

    -moz-column-width: 24em;

    -webkit-column-width: 24em;

    column-width: 24em;

    -moz-column-gap: 1em;

    -webkit-column-gap: 1em;

    column-gap: 1em;

}

.pin {

    padding: 1em;

    margin: 0 0.125em 1em;

    -moz-page-break-inside: avoid;

    -webkit-column-break-inside: avoid;

    break-inside: avoid;

    background: white;

    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);

    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);

    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);

}

.pin img {

    width: 100%;

    padding-bottom: 1em;

    margin-bottom: 0.5em;

    border-bottom: 1px solid #cccccc;

}

效果实现：

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

js实现瀑布流

原理：

　　　　　1.编写方法：获取容器内所有外层元素，存入数组；

2.编写方法：计算容器内一行可以承载多少个元素，方法：容器宽度/元素宽度，四舍五入向下取整；

3.编写方法：把每一行中所有元素的高度值存入数组；

4.编写方法：在高度值数组中找到最小高度值；

5.编写方法：把第二行第一个元素定位到上一行所有元素中高度最低的元素下面，即设置该元素的top，left，position属性；

6.编写方法：重置当前高度值数组中的最小值；

7.编写方法：从第二行第一个元素开始，遍历每个元素，用上述方法重新定位每个元素的位置，把该事件绑定到页面；

8.编写方法：监听鼠标事件，当前容器内最下面一个元素的offsetTop<浏览器可视高度+已滚动高度时，加载下一页数据；

9.加载完之后，用上述方法重新定位新加载元素的位置；

下面是一个例子：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>瀑布流</title>

     <style type="text/css">

     div{

         background: #ccc;

         width: 200px;

         position: absolute;

         transition:0.5s;

     }

     </style>

 </head>

 <body>

     <script>

         //js代码

     </script>

 </body>

 </html>

这里的模拟瀑布流里面的图片全用一个div去模拟了，每个div宽度（200px）都一样，跟上面的图片例子一样（高度可能不一样），然后将每一个div都绝对定位，因为在后面会通过left、top值改变div的位置。transition:0.5s;只是给div改变样式时一个过渡。

<script type="text/javascript">

    createDiv ()

    function createDiv () {

        for (var i = 0; i < 20; i++) {

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

            var rnd = Math.floor(Math.random()*300+50)   //div的高度在50到350之间

            div.style.height = rnd + "px";

            div.innerHTML = i;

            document.body.appendChild(div);

        };

        change()

    }

    function change() {

        var aDiv = document.getElementsByTagName('div');

        // alert(aDiv.length);

        var windowCW = document.documentElement.clientWidth;  //窗口视口的宽度

        var n = Math.floor(windowCW/210);                     //一行能容纳多少个div，并向下取整

        if (n<=0) {return};

        // alert(n);

        var t = 0;

        var center = (windowCW - n*210)/2;                   //居中

        var arrH = [];                                       //定义一个数组存放div的高度

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

            var j = i%n;                                  

            if (arrH.length==n) {                    //一行排满n个后到下一行

                var min = findMin(arrH);              //从最“矮”的排起，可以从下图的序号中看得出来，下一行中序号是从矮到高排列的

                aDiv[i].style.left =center + min*210 + "px";

                aDiv[i].style.top = arrH[min]+10 + "px";

                arrH[min] += aDiv[i].offsetHeight + 10;

                // alert(min);

            }else{

                arrH[j] = aDiv[i].offsetHeight;

                aDiv[i].style.left =center + 200*j+10*j + "px";

                aDiv[i].style.top = 0;

            }

        };

    }

    window.onresize = function(){      //窗口改变也调用函数

        change();

    }

    window.onscroll= function  () {

        // 页面总高度

        var bodyHeight = document.documentElement.offsetHeight;

        // 可视区高度

        var windowHeight = document.documentElement.clientHeight;

        //滚动条的高度

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

        var srcollH = document.body.scrollHeight;

        // alert(srcollH);

        if (srcollTop+windowHeight  >= srcollH-20) {

            createDiv();

        };

    }

    function findMin(arr) {

    var m = 0;

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

        m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;

    }

    return m;

}

</script>

分别用js和css实现瀑布流的更多相关文章

  1. 简单CSS定位瀑布流实现方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用vue.js写的一个瀑布流的组件

    用vue.js写的一个瀑布流的组件:https://segmentfault.com/a/1190000010741319 https://www.jianshu.com/p/db3cadc03402

  3. css布局-瀑布流的实现

    一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...

  4. js实现图片的瀑布流

    先看效果: 初始状态:

  5. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  6. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  7. 玩转Masonry JS库来实现瀑布流Web效果

    工作项目中需要制作个Mobile上的Web App的展示,方便快捷访问和评价反馈.在展示页面能看到应用展示图,点击进入Web应用.我不是前端开发者,对HTML, CSS, JS这三剑客仅仅是略知一二. ...

  8. 纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  9. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

随机推荐

  1. ballerina 学习五 使用composer管理ballerina 项目

    1. 启动 composer 备注: 因为这个命名和php的一个包管理工具重名了,所以可能需要使用决定路径 比如我的mac系统使用:Library/Ballerina/ballerina-0.970. ...

  2. nginx-unit docker 运行以及php &&golang 简单使用

    备注:    nginx  unit  nginx 开源的新的nginx 开发平台,但是说白了,个人感觉一般,而且官方文档也不是很好, api 接口目前暂时文档比较....,以前写过虚拟机&& ...

  3. JS实现动态提示框

    引言 什么项目都有个需求,应开发需求,需要写一个公式编辑器选择公式的插件,下面给大家讲一下实现过程.(擦汗,强作淡定,咳,开嗓~) 看图说话 本小菜开发功能前乐于先写个需求思维导图(纯属个人爱好): ...

  4. python+anaconda+pycharm工具包安装

    更新额外包 $ conda update conda 更新pip python -m pip install --upgrade pip 更新所有 conda update --all 安装ffmpe ...

  5. 使用php生成数字、字母组合验证码（一）

    项目中经常会遇到一些登陆验证,支付验证等等一系列安全验证的策略.实现方法多种多样,下面就来讲解下如何用php生成简单的文字+数字组合的验证码: 所用语言php,gd库 原理解释: a>实质上是在 ...

  6. RK3288 USB UVC camera 摄像头 VIDIOC_DQBUF Failed!!! err[I/O error]

    RK3288     Android5.1   多个品牌USB摄像头 同一块主板和代码,大部分品牌的USB摄像头可以正常使用,只有某一款USB摄像头不能使用. 插上摄像头,底层可以识别到摄像头. &l ...

  7. Memory stream is not expandable

    发现项目有一个地方在做图片缩放剪切的一个操作中.碰到有一些特殊的图片会报 Memory stream is not expandable 的错误 跟踪的时候发现是 由方法 originalStream ...

  8. python-错误

    错误 Exception happened during processing of request from ('10.0.0.120', 58083) Traceback (most recent ...

  9. Java中如何查看一个类依赖的包

    Java中如何查看一个类依赖的包 如图, 我如何知道JSONArray是依赖的哪一个包呢,这里有两个json-lib包?   测试语句:   public static void main(Strin ...

  10. 设计模式—单例模式（java）

    一:懒汉式 1:  线程安全的双重锁检查机制 public class Singleton{ private Singleton() {}    //  私有构造函数,保证不被外界实例化(不考虑反射) ...