js实现懒加载瀑布流

最新推荐文章于 2024-04-16 16:27:30 发布

赵二水

最新推荐文章于 2024-04-16 16:27:30 发布

阅读量792

点赞数 2

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_51983617/article/details/121080040

版权

两种思路用js实现瀑布流式布局，包括懒加载以及自适应。

电脑端效果图
浏览器
手机端效果图
在这里插入图片描述
没有过多注意整体样式，只是给图片加了边框。

方法一

整体思路是将一组图片信息放在一维数组中，计算有多少列，分成该长度的二维数组，遍历数组将图片放到页面中。

html+css

<!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">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <style>
        *{
     
            margin: 0px;
            padding: 0px;
        }
        img{
     
            width: 100%;
            
        }
        .box{
     
            border: solid 1px black;
            padding: 5px;
            overflow: hidden;
            margin-right: 20px;
            display: inline-block;
            min-width: 230px;
            margin-bottom: 20px;
        }
        #main{
     
            display: flex;
            justify-content: center;
            align-items:flex-start;
        }
        .coloum:nth-last-child(1)>.box{
     
            margin-right: 0px;
        }
    </style>
</head>
<body>
    <div id="main" style="border: solid 2px black;position: relative;overflow: hidden;">
        
    </div>
    <script src="./1.js"></script>
</body>
</html>

js代码

const img1 = [
    {
   
        name:'图片1',
        path:'https://c-ssl.duitang.com/uploads/item/202003/02/20200302200934_ewenx.thumb.400_0.jpg'
    },
    {
   
        name:'图片2',
        path:'https://c-ssl.duitang.com/uploads/blog/202009/02/20200902161748_ad413.thumb.400_0.jpg'
    },
    {
   
        name:'图片3',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片4',
        path:'https://c-ssl.duitang.com/uploads/blog/202011/21/20201121002940_60e6a.thumb.400_0.jpg'
    },{
   
        name:'图片5',
        path:'https://c-ssl.duitang.com/uploads/blog/202009/13/20200913024331_Tfrnh.thumb.400_0.jpeg'
    },
    {
   
        name:'图片6',
        path:'https://c-ssl.duitang.com/uploads/item/201503/30/20150330224142_WrQ3M.thumb.400_0.jpeg'
    },
    {
   
        name:'图片7',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片8',
        path:'https://c-ssl.duitang.com/uploads/item/202005/16/20200516191851_xecnm.thumb.400_0.png'
    },
    {
   
        name:'图片9',
        path:'https://c-ssl.duitang.com/uploads/item/201503/30/20150330224142_WrQ3M.thumb.400_0.jpeg'
    },
    {
   
        name:'图片10',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片11',
        path:'https://c-ssl.duitang.com/uploads/item/202005/16/20200516191851_xecnm.thumb.400_0.png'
    },
    {
   
        name:'图片12',
        path:'https://c-ssl.duitang.com/uploads/blog/202009/02/20200902161748_ad413.thumb.400_0.jpg'
    },
    {
   
        name:'图片13',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片14',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片15',
        path:'https://c-ssl.duitang.com/uploads/blog/202011/21/20201121002940_60e6a.thumb.400_0.jpg'
    }
    ,{
   
        name:'图片16',
        path:'https://c-ssl.duitang.com/uploads/blog/202009/13/20200913024331_Tfrnh.thumb.400_0.jpeg'
    },
    {
   
        name:'图片17',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片18',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片19',
        path:'https://c-ssl.duitang.com/uploads/blog/202011/21/20201121002940_60e6a.thumb.400_0.jpg'
    }
    ,{
   
        name:'图片20',
        path:'https://c-ssl.duitang.com/uploads/blog/202009/13/20200913024331_Tfrnh.thumb.400_0.jpeg'
    },
    {
   
        name:'图片17',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片18',
        path:'https://c-ssl.duitang.com/uploads/blog/202106/06/20210606123318_9846b.thumb.400_0.jpg'
    },
    {
   
        name:'图片19',
        path:'https://c-ssl.duitang.com/uploads/blog/202011/21/20201121002940_60e6a.thumb.400_0.jpg'
    }
    ,{
   
        name:'图片20',
        path:'https://c-ssl.duitang.com/uploads/blog/202009/13/20200913024331_Tfrnh.thumb.400_0.jpeg'
    },
    
]


const img2 = [
    {
   
        name:'图片1',
        path

最低0.47元/天解锁文章

赵二水

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js实现懒加载瀑布流

两种思路用js实现瀑布流式布局，包括懒加载以及自适应。电脑端效果图手机端效果图没有过多注意整体样式，只是给图片加了边框。方法一整体思路是将一组图片信息放在一维数组中，计算有多少列，分成该长度的二维数组，遍历数组将图片放到页面中。html+css<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp
复制链接

扫一扫