阿里面试—诱惑我们半夜疯狂消费的瀑布流页面究竟是如何实现的？？？

椰汁33
135 阅读1分钟

效果图

image.png

准备

文件摆放：

image.png

img文件夹

1.webp

1.webp

2.webp

2.webp

3.webp

3.webp

4.webp

4.webp

5.webp

5.webp

6.webp

6.webp

7.webp

7.webp

8.webp

8.webp

9.webp

9.webp

10.webp

10.webp

代码和分析

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
        }
        .box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #4bc6b5;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/3.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/4.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/5.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/6.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/7.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/8.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/9.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/3.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/4.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/5.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/6.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/7.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/8.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/9.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.webp" alt="">
            </div>
        </div>

    </div>

    <script src="./index.js"></script>
</body>
</html>

html分析

  • 定义一个container容器
  • 定义20个box容器
  • 在box容器中定义box-img容器，并在该容器中存放img标签元素，用于存放图片
  • 给container容器加一个相对定位，来实现后续的移动
  • 给box加一个float为left来实现向左浮动

js

//获取用户屏幕宽度，决定一行能放下几张图
//操作下一张图，放到上一行最矮的列下面

imgLocation('container', 'box');

function imgLocation(parent ,content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content); 
    //document.querySelectorAll('#container .box');
    //每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);
    cparent.style.width = `${imgWidth * num}px`;

    //要操作的是哪一张，每一列的高度
    var BoxHeightArr = [];
    for (var i = 0; i < ccontent.length; i++) {
        if (i < num){//第一行
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }else {//要操作的
            var minHeight = Math.min.apply(null ,BoxHeightArr);
            var minIndex = BoxHeightArr.indexOf(minHeight);

            //摆放图片的位置
            ccontent[i].style.position = 'absolute';
            ccontent[i].style.top = minHeight + 'px';
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px';

            //更新这一列的高度
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] +  ccontent[i].offsetHeight;
        }
    }
};

function getChildElement(parent, child) {
    //获取parent中所有的child
    var childArr = [];
    var allChild = parent.getElementsByTagName('*');
    //挑出来所有的box
    for (var i = 0; i < allChild.length; i++) {
       if (allChild[i].className === child ) {
        childArr.push(allChild[i]);
       }
    }
    return childArr;
};

js分析

  • 定义两个函数imgLocation和getChildElement

  • imgLocation(parent ,content)：

  1. 定义两个形参，parent传入 'container'，content传入 'box'，通过id获取parent容器，并命名为cparent；
  2. 通过getChildElement(cparent, content)(这个是我们自定义的方法，也可以通过document.querySelectorAll('#container .box'); 来实现，但是在这不太推荐，这样的话可维护性就降低了)获取cparent内所有的content容器，并命名为ccontent，也就是获取container内的box容器，应该是有20个box容器；
  3. 接下来我们应该来获取每个box宽度和屏幕的宽度，来算出该屏幕一行能放几个box容器，通过ccontent[0].offsetWidth和document.documentElement.clientWidth来获取box和屏幕宽度，算出一行可放的box容器数目num(向下取整)，然后再将container容器宽度设置为imgWidth * num ，通过 cparent.style.width = ${imgWidth * num}px; 来实现；
  4. 设计一个数组BoxHeightArr用于存放第一列图片的高度，第num+1张图片就存放在前num中数值最小的图片下面，获取数值最小的下标，给要加入的图片设置绝对定位，通过left，top移动来实现，并把该图片的高度加上进行更新。
  • getChildElement(parent, child)：
  1. 定义一个childArr数组用于存放child容器；
  2. 定义allChild用于获取所有的容器；
  3. 通过遍历allChild来筛选child容器并加入childArr；
  4. 然后childArr。

最后

希望能够给你们带来帮助哟，如果有帮助的话可以点个赞鼓励鼓励嘛，小编继续加油~

image.png

avatar
文章
阅读
粉丝