js實現瀑布流

阿新 • • 發佈：2017-05-09

done title pos webkit for ria side 可能 src

下午查找了瀑布流的相關原理，找了一些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實現瀑布流

done title pos webkit for ria side 可能 src 下午查找了瀑布流的相關原理，找了一些css3實現的還有js實現的，最後總結了一些比較簡單的，易懂的整理起來 1.css3實現只要運用到 column-count分列　　　　　

js實現瀑布流

js實現瀑布流

原生JS實現瀑布流布局

原生js實現瀑布流效果函式封裝

js實現瀑布流布局

原生js實現瀑布流以及載入效果——李帥醒部落格

原生JS實現瀑布流及載入效果

vue.js實現瀑布流之vue-waterfall-easy

js之瀑布流的實現

js簡單瀑布流實現

【前端】用jQuery實現瀑布流效果

flex布局實現瀑布流排版

前端jQuery實現瀑布流

Masonry與AmazeUI結合實現瀑布流

5.使用RecyclerView優雅的實現瀑布流效果

只用css實現瀑布流效果

jq實現瀑布流佈局

JS原生瀑布流

基於JavaScript實現瀑布流佈局

RecyclerView實現瀑布流

web頁面和小程式頁面實現瀑布流效果

js實現瀑布流

相關推薦