0
点赞
收藏
分享

微信扫一扫

瀑布流（JS原生）

谁知我新 2022-04-13 阅读 59
前端

瀑布流（JS原生）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .box {
            float: left;
            padding: 5px;
        }

        .box .img {
            width: 150px;
            height: auto;
            border: 1px solid #ccc;
            padding: 5px;
            border-radius: 6px;
        }

        .box .img img {
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <ul id="container">
        <li class="box">
            <div class="img">
                <img src="img/0.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/1.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/2.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/3.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/4.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/5.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/6.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/7.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/8.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/0.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/1.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/2.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/3.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/4.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/5.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/6.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/7.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/8.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/0.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/1.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/2.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/3.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/4.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/5.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/6.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/7.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
        <li class="box">
            <div class="img">
                <img src="img/8.jpg" alt="">
            </div>
            <p>标题</p>
        </li>
    </ul>
    <script>
        window.onload = function () {
            var container = document.getElementById("container"); //获取大的容器
            var allTags = container.getElementsByTagName("*") //获取container容器中的所有标签
            // console.log(allTags);
            // console.log([1, 2, 3, 4, 5]);
            //类数组和数组的区别？
            // 相同点：都有索引
            // 不同点：
            // 数组的原型prototype中有操作数组的方法  如push()...
            // 类数组原型prototype中没有数组的操作方法

            var boxArr = []  //定义一个空数组来存放 li.box
            for (var i = 0; i < allTags.length; i++) {
                if (allTags[i].className == "box") {
                    boxArr.push(allTags[i])
                }
            }
            console.log(boxArr);

            // 获取每一个存放图片的盒子宽度li.box
            var imgWidth = boxArr[0].offsetWidth
            // 获取屏幕的可视宽度
            var screenWidth = document.documentElement.clientWidth
            // 计算一行最多放多少列
            var num = Math.floor(screenWidth / imgWidth)

            // 先摆放第一行图片
            var boxArrHeight = []  //存放第一行的每一个盒子的高度
            for (var i = 0; i < boxArr.length; i++) {

                if (i < num) {
                    // 第一行-任意摆放
                    boxArrHeight[i] = boxArr[i].offsetHeight  //将第一行的每一块的高度存在boxArrHeight数组中
                } else {
                    // 其他行
                    // call()
                    // apply()
                    // bind()
                    var minHeight = Math.min.apply(null, boxArrHeight) //获取第一行最小高度的那个盒子
                    var minIndex = null  //定义一个变量，来接受最小高度的哪个盒子索引
                    console.log(minHeight);
                    for (var k in boxArrHeight) {  //k指的是数组的索引
                        if (boxArrHeight[k] == minHeight) {
                            minIndex = k
                        }
                    }
                    console.log(minIndex);

                    boxArr[i].style.position = "absolute"
                    boxArr[i].style.left = boxArr[minIndex].offsetLeft + "px"
                    boxArr[i].style.top = minHeight + "px"

                    // 在更新以下数组的boxArrHeight
                    boxArrHeight[minIndex] = boxArrHeight[minIndex] + boxArr[i].offsetHeight
                }
            }
            console.log(boxArrHeight);

        }


    </script>
</body>

</html>
举报

相关推荐

前端JS项目实战——瀑布流

前端javascript开发语言

原生JS实现瀑布流布局

前端开发JavaScript瀑布流加载数组Html/CSS

瀑布流

i++html加载

js瀑布流之各种型号美女

日记本基础前端前端开发JSJavaScr...前端编程编程语言爱好者让前端飞

web前端入门到实战：原生JS实现一个瀑布流插件

日记本视觉艺术让前端飞网页前端后台技...

JQ 瀑布流

javascriptViewUIcsshtmlMathHarmonyOS后端开发

iOS瀑布流

布局iosi++自定义数组jQuery前端开发

CSS实现瀑布流

javascriptecmascripthtml前端开发语言

Flutter 瀑布流效果

日记本Flutter程序员Flutter教程网

CSS瀑布流实现

华为odpythonc语言
0 条评论