js实现瀑布流

Posted 2020-09-17 张小雪、

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现瀑布流相关的知识，希望对你有一定的参考价值。

下午查找了瀑布流的相关原理，找了一些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: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -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.加载完之后，用上述方法重新定位新加载元素的位置；

下面是一个例子：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>瀑布流</title>
 6     <style type="text/css">
 7     div{
 8         background: #ccc;
 9         width: 200px;
10         position: absolute;
11         transition:0.5s;
12     }
13     </style>
14 </head>
15 <body>
16     
17     <script>
18         //js代码
19     </script>
20 </body>
21 </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实现瀑布流的主要内容，如果未能解决你的问题，请参考以下文章

原生JavaScript实现图片瀑布流效果，可更改配置参数带完整版解析代码[waterFall.js]