javascript实现瀑布流

最新推荐文章于 2022-07-10 21:40:43 发布

code_xin~

最新推荐文章于 2022-07-10 21:40:43 发布

阅读量57

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44456354/article/details/111872391

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

javascript实现瀑布流

在这里插入图片描述

html、css部分

图片部分可自己上网找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .container {
            margin: 0 auto;
        }
        .container ul li {
            float: left;
        }
        .container img {
            outline: none;
            padding: 9px;
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: 0.8s;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li class="imgBox"><img src="img/1.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/12.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/2.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/16.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/8.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/7.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/10.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/4.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/5.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/6.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/13.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/9.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/11.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/14.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/3.jpg" alt="" ></li>
            <li class="imgBox"><img src="img/15.jpg" alt="" ></li>
        </ul>
    </div>
    </body>
</html>

js部分

window.onload = function() {
    getImgSize("ul","imgBox");
    window.onscroll = function() {
        var imgSrc = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg"];
        if(loadImg()) {
            var ul = document.getElementsByTagName("ul")[0];
            for(var i = 0 ; i < 16 ; i++) {
                var li = document.createElement("li");
                li.className = "imgBox";
                var img = document.createElement("img");
                img.src = "img/" + imgSrc[i];
                li.appendChild(img);
                ul.appendChild(li);
            }
            getImgSize("ul","imgBox");   
        }
    }
}
    
function getImgSize(parent,child) {
    var ul = document.getElementsByTagName(parent)[0];
    var imgBox = ul.getElementsByClassName(child);
    var len = imgBox.length;
    var imgHeight = []
    var col = Math.floor(window.innerWidth / imgBox[0].offsetWidth);
    for(var i = 0 ; i < len ; i++) {
        if(i < col) {
            imgHeight[i] = imgBox[i].offsetHeight; 
        }else {
            var minHeight = Math.min.apply(this,imgHeight);
            var minIndex = getMinImg(minHeight,imgHeight);
            imgBox[i].style.position = "absolute";
            imgBox[i].style.top = minHeight + "px";
            imgBox[i].style.left = imgBox[minIndex].offsetLeft + "px";
            imgHeight[minIndex] = imgHeight[minIndex] + imgBox[i].offsetHeight;
        }
    }
}
function getMinImg(min, arr) {
    for(var i = 0 ; i < arr.length ; i++) {
        if(arr[i] == min) {
            return i;
        }
    }
}
function loadImg() {
    var ul = document.getElementsByTagName("ul")[0];
    var imgBox = ul.getElementsByClassName("imgBox");
    var lastImg = imgBox[imgBox.length - 1];
    var pageHeight = window.innerHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(lastImg.offsetTop < pageHeight + scrollTop) {
        return true;
    }
}

code_xin~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现瀑布流

javascript实现瀑布流html、css部分图片部分可自己上网找<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c
复制链接

扫一扫