JS实现图片瀑布流效果

最新推荐文章于 2024-05-23 19:27:34 发布

遥感与地理信息

最新推荐文章于 2024-05-23 19:27:34 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： HTML CSS javascript 瀑布流

本文链接：https://blog.csdn.net/qq_22170875/article/details/89475159

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

0.实现原理

首先对所有图片统一规定宽度，可以计算出每一行可排列的图片列数N，然后将每一列图片的高度保存到一个数组当中；
然后从第N+1张图片开始，寻找第一行图片中高度最小的位置，通过绝对定位的方式在此处加载第N+1张图片，同时把第N+1张图片的高度加上数组里面的最小值并且返回到数组里面，依次类推。

1.HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js瀑布流</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/app.js"></script>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="image/1.jpg">
                <p class="img_name">1.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/2.jpg">
                <p class="img_name">2.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/3.jpg">
                <p class="img_name">3.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/4.jpg">
                <p class="img_name">4.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/5.jpg">
                <p class="img_name">5.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/6.jpg">
                <p class="img_name">6.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/7.jpg">
                <p class="img_name">7.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/8.jpg">
                <p class="img_name">8.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/9.jpg">
                <p class="img_name">9.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/10.jpg">
                <p class="img_name">10.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/11.jpg">
                <p class="img_name">11.jpg</p>
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="image/12.jpg">
                <p class="img_name">12.jpg</p>
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="image/13.jpg">
                <p class="img_name">13.jpg</p>
            </div>
        </div>
    </div>
</body>
</html>

2.CSS样式表文件

/*设置网页内外边距*/
*{
    margin: 0px;
    padding: 0px;
}

/*设置主容器的布局方式为相对布局*/
#container{
    position: relative;
}

/*设置盒子的内边距、浮动属性*/
.box{
    padding: 5px;
    float: left;
}

/*设置图片容器的内边距、边框、阴影、圆角*/
.box_img{
    padding: 5px;
    border: 5px solid #cccccc;
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
}

/*设置图片的宽度和高度*/
.box_img img{
    width: 200px;
    height: auto;
}

/*设置图片名称段落文本的颜色、水平对齐方式*/
.img_name{
    color: darkred;
    text-align: center;
}

3.js脚本文件


window.onload=function(){
    imgLocation("container","box");
    var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};
    /*为窗口添加滚动条事件*/
    window.onscroll = function() {
        if(checkFlag()){
            //alert("hello");
            loadImage(imgData)
        }
    }
}

/*图片按指定规则排列*/
function imgLocation(parent,content){
    /*将parent下的所有的content全部取出*/
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent,content);
    //console.log(ccontent);
    var imgWidth = ccontent[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth/imgWidth);
    cparent.style.cssText = "Width:"+imgWidth*num+"px; margin:0px auto";

    var BoxHeightArr = [];
    for(var i=0;i<ccontent.length;i++){
        if(i<num) {
            //BoxHeightArr.push(ccontent[i].offsetHeight);
            BoxHeightArr[i] = ccontent[i].offsetHeight;
            console.log(BoxHeightArr[i]);
        }else{
            var minHeight = Math.min.apply(null,BoxHeightArr);
            //console.log(minHeight);
            var minIndex = getminheightLocation(BoxHeightArr,minHeight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight + "px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
            BoxHeightArr[minIndex]+=ccontent[i].offsetHeight;
        }
    }
}

/*自动加载图片*/
function loadImage(imgData) {
    var cparent = document.getElementById("container");
    for(var i=0;i<imgData.data.length;i++){
        var ccontent = document.createElement("div");
        ccontent.className = "box";
        cparent.appendChild(ccontent);
        var box_img = document.createElement("div");
        box_img.className = "box_img";
        ccontent.appendChild(box_img);
        var img = document.createElement("img");
        img.src = "image/"+imgData.data[i].src;
        var p = document.createElement("p");
        p.className = "img_name";
        p.innerText = imgData.data[i].src;
        box_img.appendChild(img);
        box_img.appendChild(p);
    }
    imgLocation("container","box");
}

/*检查是否需要加载图片*/
function checkFlag() {
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent,"box");
    var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;
    console.log(lastContentHeight+" "+scrollTop+" "+pageHeight);
    if(lastContentHeight < pageHeight + scrollTop){
        var imgccontent = getChildElement(cparent,"box_img");
        //alert(imgccontent.length);
        if(imgccontent.length < 100){
            return true;
        }else{
            alert("图片够多了，已经加载了100张了！");
            return false;
        }
    }
}

/*得到最小高度所在索引*/
function getminheightLocation(BoxHeightArr,minHeight){
    for(var i in BoxHeightArr) {
        if(BoxHeightArr[i] == minHeight) {
            return i;
        }
    }
}

/*得到parent中的所有content子对象*/
function getChildElement(parent,content){
    var contentArr = [];
    var allcontent = parent.getElementsByTagName("*");
    for(var i=0;i<allcontent.length;i++){
        if(allcontent[i].className==content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}

5.效果展示

js瀑布流

5.参考

极客学院视频教程:Web前端开发教学 - 第一部分：H5+CSS+JS
欢迎关注我的公众号。
在这里插入图片描述

遥感与地理信息

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现图片瀑布流效果

1.HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js瀑布流</title> <link rel="stylesheet" type="text/css" href="css/style.c...
复制链接

扫一扫