JavaScript日记——实现图片的瀑布流和底部刷新

最新推荐文章于 2023-10-21 13:25:00 发布

饥渴计科极客杰铿

最新推荐文章于 2023-10-21 13:25:00 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_32198277/article/details/52077699

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板
实现这个功能首先要有html，css和js基础

首先先实现瀑布流

即下一行的图片放在上一行的凹下去的地方

基本的html代码如下

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!--script不能用<script/>-->
    <script src="js/app1.js"></script>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="img_box">
            <img src="images/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="img_box">
            <img src="images/5.jpg">
        </div>
    </div>
</div>
</body>
</html>

然后再写一下css

*{
    margin: 0px;
    padding: 0px;
}
/*container为相对布局*/
#container{
    position:relative;
}
/*box向左浮动*/
.box{
    padding:5px;
    float: left;
}
/*加一些边框*/
.img_box{
    padding: 5px;
    border:1px solid #ccc;
    box-shadow:0 0 5px #ccc;
    border-radius: 5px;
}
/*宽度固定，高度自适应，使图片不变形*/
.img_box img{
    width: 150px;
    height: auto;
}

接下来就是这次的核心，写js

//开始加载要执行的方法
window.onload=function(){
    imgLocation("container","box")
}
function imgLocation(parent,content){
    var cparent=document.getElementById(parent);
    var ccontent=getChildElement(cparent,content)
    //图片宽度
    var imgWidth=ccontent[0].offsetWidth;
    //每一行图片个数
    var cols= Math.floor(document.documentElement.clientWidth/imgWidth);
    //使宽度一定，内容居中
    cparent.style.cssText="width:"+imgWidth *cols+"px;margin:0 auto";

    var BoxHeightArr=[];
    for(var i=0;i<ccontent.length;i++){
        //获取第一行图片的高度
        if (i<cols){
            BoxHeightArr[i]=ccontent[i].offsetHeight;
        }else {
            //Math.min对数组要加上apply
            var minheight=Math.min.apply(null,BoxHeightArr);
            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]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight

        }
    }
}
//获取最小高度的位置
function getminheightLocation(BoxHeightArr,minHeight){
    for(var i in BoxHeightArr){
        if (BoxHeightArr[i]==minHeight){
            return i;
        }
    }
}
function getChildElement(parent,content){
    var contentArr=[];
    //获取所有子Element
    var allcontent=parent.getElementsByTagName("*")
    for(var i=0;i<allcontent.length;i++){
        //如果className是box就添加进去
        if (allcontent[i].className==content){
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr
}

这样就简单实现了瀑布流效果

接下来是下拉到底部自动刷新

主要是在滚动时监听是否到底部，到达差不多底部的位置就加载
添加以下代码即可

window.onscroll=function(){
    //模拟数据
    var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
    if (checkFlag()){
        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 boximg=document.createElement("div");
            boximg.className="img_box";
            ccontent.appendChild(boximg);
            var img=document.createElement("img");
            img.src="images/"+imgData.data[i].src;
            boximg.appendChild(img);
        }
        //按照之前规则排列
        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;
    //如果差不多到达底部则返回true
    if (lastContentHeight<scrollTop+pageHeight){
        return true;
    }
}

效果图如下

效果图

饥渴计科极客杰铿

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript日记——实现图片的瀑布流和底部刷新

瀑布流现在基本上是图片显示网页的标配，主要是为了适配图片和文字块的大小，使显示出的效果没有那么呆板实现这个功能首先要有html，css和js基础首先先实现瀑布流即下一行的图片放在上一行的凹下去的地方基本的html代码如下<html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流</title> <link rel="
复制链接

扫一扫