JavaScript：實現瀑布流

時間 2019-12-02

標籤 javascript 實現瀑布欄目 JavaScript 简体版

原文原文鏈接

1、前言：javascript

　　瀑布流如今是一個很是經常使用的佈局方式了，尤爲在購物平臺上，例如蘑菇街，淘寶等等。css

2、流程：html

一、在html文件中寫出佈局的元素內容；java

二、在css文件中總體對每個必要的元素進行樣式和浮動設置；數組

三、在js文件中動態實現佈局，每個滾動時，都要刷新佈局。瀏覽器

3、思想：app

實現瀑布流，就是每次當前一列的圖片顯示徹底後，接着要顯示下一列時，先找出最短的一列，而後將圖片填充上，以此類推...ide

4、代碼：佈局

waterFlow.html:this

<!DOCTYPE html>
<html lang="zh-en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流效果</title>
    <link rel="stylesheet" href="waterFlow.css">
    <script src="waterFlow.js" type="text/javascript"></script>
</head>
<body>
    <!--父盒子-->
    <div id="main">
         <!--子盒子-->
         <div class="box">
              <div class="pic">
                  <img src="images/0.png">
                  <div>
                      <span>喜歡:666</span>
                      <span>收藏:999</span>
                  </div>
              </div>
         </div>

        <div class="box">
            <div class="pic"><img src="images/1.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/2.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/3.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/4.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/5.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/6.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/7.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/8.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/9.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/10.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/11.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/12.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/13.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/14.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/15.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/16.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/17.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/18.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/19.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/20.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/21.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/22.png" alt=""></div>
        </div>
        <div class="box">
            <div class="pic"><img src="images/23.png" alt=""></div>
        </div>
    </div>
</body>
</html>

View Code

waterFlow.css:

*{
    padding: 0;
    margin: 0;
}

#main{
    /*定位*/
    position: relative;
}

.box{
   float: left;
   /*內邊距*/
   padding: 15px 0 0 15px;
   /*background-color: red;*/
}

.pic{
    border:1px solid #dddddd;
    padding: 10px;
    background-color: white;
    border-radius: 5px;
}

.pic img{
    width: 165px;
}

View Code

waterFlow.js:

// ===  值比較  類型比較
function $(id) {
    return typeof id === 'string' ? document.getElementById(id) : id
}


// 當窗口加載完畢
window.onload = function () {
     // 瀑布流佈局
     WaterFall('main', 'box');
     // 滾動加載盒子
     window.onscroll = function () {
         if(CheckWillLoad()){ // 具有滾動的條件
            // 造數據
            var dataArr = [{'src': '10.png'},{'src': '11.png'},{'src': '13.png'},{'src': '15.png'},{'src': '17.png'},{'src': '19.png'},{'src': '21.png'},{'src': '23.png'}];

            // 遍歷
            for(var i=0; i<dataArr.length; i++){
                // 建立子盒子
                var newBox = document.createElement('div');
                newBox.className = 'box';
                $('main').appendChild(newBox);

                var newPic = document.createElement('div');
                newPic.className = 'pic';
                newBox.appendChild(newPic);

                var newImg = document.createElement('img');
                newImg.src = 'images/' + dataArr[i].src;
                newPic.appendChild(newImg);
            }

            // 從新實現瀑布流佈局
           WaterFall('main', 'box');
         }
     }
};


// http://blog.sina.com.cn/s/blog_966e43000101bplb.html
// 瀑布流佈局
function WaterFall(parent, child) {
    // ------ 父盒子居中
    // 1.1 拿到全部的子盒子
    var allBox = document.getElementsByClassName(child);
    // 1.2 求出其中一個盒子的寬度
    var boxWidth = allBox[0].offsetWidth;
    // 1.3 求出頁面的寬度
    var clientWidth = document.body.clientWidth;
    // 1.4 求出列數
    var cols = Math.floor(clientWidth / boxWidth);
    // 1.5 父盒子居中 css賦值都是String類型
    $(parent).style.width = boxWidth * cols + 'px';
    $(parent).style.margin = '0 auto';

    // ------ 子盒子的定位
    // 1.1 定義高度數組
    var heightArr = [];

    // 1.2 遍歷全部的盒子
    for(var i=0; i<allBox.length; i++){
        // 1.2.1 取出單個盒子的高度
        var boxHeight = allBox[i].offsetHeight;
        // 1.2.2 判斷
        if(i < cols){ // 第一行
           heightArr.push(boxHeight);
        }else{ // 剩餘的行
           // 取出數組中最矮的盒子的高度
           var minBoxHeight = Math.min.apply(this, heightArr);
           // 取出數組中最矮的盒子的索引
           var minBoxIndex = GetMinBoxIndex(heightArr, minBoxHeight);
           // 子盒子定位
           allBox[i].style.position = 'absolute';
           allBox[i].style.top = minBoxHeight +'px';
           allBox[i].style.left = boxWidth * minBoxIndex + 'px';

           // 更新數組中最矮盒子的高度
           heightArr[minBoxIndex] += boxHeight;
        }
    }

    // console.log(heightArr, minBoxHeight, minBoxIndex);
}

// 獲取最矮盒子的索引
function GetMinBoxIndex(arr, value) {
    for(var i=0; i<arr.length; i++){
        if (arr[i] == value) return i;
    }
}

// 判斷是否具有加載條件
function CheckWillLoad() {
    // 1.1 獲取最後的一個盒子
    var allBox = document.getElementsByClassName('box');
    var lastBox = allBox[allBox.length - 1];

    // 1.2 求出高度的一半 + 頭部偏離的高度
    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;

    // 1.3 求出頁面的高度  JS存在兼容性問題 ---> 標準模式  混雜模式
    var clientHeight = document.body.clientHeight || document.documentElement.clientHeight;

    // 1.4 求出頁面偏離瀏覽器的高度
    var scrollTopHeight = document.body.scrollTop;

    // 1.5 判斷返回
    return lastBoxDis <= clientHeight + scrollTopHeight;
}

View Code

5、效果圖：

源碼：http://files.cnblogs.com/files/XYQ-208910/waterFlow.zip

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。