刷脸支付 CoreJava 压制组装机 电力杆 WorldCloud namespace SLAM php powershell jpa cocoa jScroll ddos压力测试 郑州网站开发 pmp培训视频 微信小游戏开发视频 webform开发教程 kafka学习 kubernetes架构 python类和对象 python位运算 python分析 java介绍 java时间戳转时间 javasocket java声明变量 linux系统安装 linux目录系统 saminside dep pr放大画面 视频字幕制作软件 驱动程序更新 ps平面广告设计教程 电脑内录软件 美图秀秀pc版下载 winrar无广告版 ps平面设计基础教程 抖音表白代码 尾行3存档
当前位置: 首页 > 学习教程  > 编程语言

javascript实现瀑布流

2020/12/28 18:41:28 文章标签:

javascript实现瀑布流 html、css部分 图片部分可自己上网找 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><m…

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;
    }
}


本文链接: http://www.dtmao.cc/news_show_550078.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?