欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

瀑布流布局

程序员文章站 2022-03-20 23:29:15
关于瀑布流布局还挺常见的。花瓣网目前用的似乎就是瀑布流布局。今天跟着视频做了一个。学前端做这些小特效还是挺有感觉的QAQ。代码来了index.html &...

关于瀑布流布局还挺常见的。花瓣网目前用的似乎就是瀑布流布局。今天跟着视频做了一个。
学前端做这些小特效还是挺有感觉的QAQ。
代码来了
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="main">
        <div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div>
        <div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div>
    </div>
    <script src="js/index.js"></script>
    <script src="js/scroll.js"></script>
</body>
</html>

index.css

*{
    margin: 0;
    padding: 0;
    border: none;
}
img{
    vertical-align: top;
}
html,body{
    width: 100%;
    height: 100%;
}
#main{
    position: relative;
}
.box{
    float: left;
    padding: 15px 0 0 15px;
}
.pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}
.pic img{
    width: 250px;
}

index.js

window.onload = function () {
    //1.实现瀑布流布局
    waterFull("main", "box");

    //2.动态加载图片
    var timer1 = null;
    window.onscroll = function () {
        clearTimeout(timer1);
        timer1 = setTimeout(function () {
            if(checkWillLoadImage()){
                //2.1造数据
                var dataArr = [
                    {"src": "1.jpg"},
                    {"src": "2.jpg"},
                    {"src": "3.jpg"},
                    {"src": "4.jpg"},
                    {"src": "5.jpg"},
                    {"src": "6.jpg"},
                    {"src": "7.jpg"},
                    {"src": "8.jpg"},
                    {"src": "9.jpg"},
                    {"src": "1.jpg"},
                    {"src": "2.jpg"},
                ];
                //2.2创建元素
                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);
                }
                //2.3重新布局
                waterFull("main", "box");
            }
        }, 200);
    }
    //3.窗口的大小发生改变
    var timer = null;
    window.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            console.log(1);
            waterFull("main", "box");
        }, 200);
    }
};

/**
 * 实现瀑布流布局
 */
function waterFull(parent, child) {
    //1. 父盒子居中
    //1.1 获取所有盒子
    var allBox = $(parent).getElementsByClassName(child);
    //1.2获取子盒子的宽度
    var boxW = allBox[0].offsetWidth;
    //1.3获取屏幕宽度
    var screenW = document.documentElement.clientWidth;
    //1.4求出列数
    var cols = parseInt(screenW / boxW);
    //1.5父盒子居中
    $(parent).style.width = cols * boxW + 'px';
    $(parent).style.margin = "0 auto";

    //2.子盒子的定位
    //2.1定义高度数组
    var heightArr = [], boxHeight, minBoxHeight = 0, minBoxIndex = 0;
    //2.2遍历子盒子
    for(var i=0;i<allBox.length;i++){
        //2.2.1求出每个子盒子的高度
        boxHeight = allBox[i].offsetHeight;
        //2.2.2取出第一行盒子的高度放入高度数组
        if(i < cols){ //第一行
            heightArr.push(boxHeight);
            allBox[i].style = '';
        }else{ //剩余行
            //1.取出最矮的盒子高度
            minBoxHeight = Math.min.apply(this, heightArr);
            //2.求出最矮盒子对应的索引
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
            //3.子盒子定位
            allBox[i].style.position = "absolute";
            allBox[i].style.left = minBoxIndex * boxW + 'px';
            allBox[i].style.top = minBoxHeight + 'px';

            //4.更新数组中高度
            heightArr[minBoxIndex] += boxHeight;
        }  
    }
};

/**
 * 拿到最矮盒子对应索引
 * @param {*} arr 
 * @param {*} val 
 */
function getMinBoxIndex(arr, val) {
    for(var i=0;i<arr.length;i++){
        if(arr[i] === val){
            return i;
        }
    }
}

function $(id) {
    return typeof id === "string" ? document.getElementById(id) : null;
};

/**
 * 判断是否具备加载图片的条件
 * @param {*} params 
 */
function checkWillLoadImage(params) {
    //1.获取最后一个盒子
    var allBox = document.getElementsByClassName("box");
    var lastBox = allBox[allBox.length - 1];
    //2.求出最后一个盒子自身高度的一半加上盒子距离顶部的高度
    var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
    //3.求出屏幕的高度
    var screenW = document.body.clientHeight || document.documentElement.clientHeight;
    //4.求出页面偏移浏览器的高度
    var scrollTop = scroll().top;
    return lastBoxDis <= screenW + scrollTop;
}

scroll.js

	/**
    *获取滚动的头部距离和滚动距离
    *scroll().top scroll().left
    *return {*}
    */
    function scroll() {
        if(window.pageYOffset !== null){
            return {
                top: window.pageYOffset,
                left: window.pageXOffset
            }
        }else if(document.compatMode === "CSS1Compat"){ //如果浏览器按照w3c的规范来(兼容模式)
            return {
                top: document.documentElement.scrollTop,
                left: document.documentElement.scrollLeft
            }
        }
        return {
            top: document.body.scrollTop,
            left: document.body.scrollLeft
        }
    }

下面是用到的图片
瀑布流布局
瀑布流布局
瀑布流布局
瀑布流布局
瀑布流布局
瀑布流布局
瀑布流布局
瀑布流布局
瀑布流布局

本文地址:https://blog.csdn.net/qq_40888843/article/details/107477220

相关标签: JavaScript js