瀑布流and懒加载

已于 2023-11-26 16:12:09 修改
阅读量771 收藏 17
点赞数 23
文章标签： javascript 开发语言 ecmascript
于 2023-11-26 14:50:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AYBBZXY/article/details/134627796
版权

文字注释在代码中

在这里插入图片描述

先放入几张图片
获取浏览器界面的宽
获取一张图片的宽度
以上两者相除，用Math.floor就可以取到整数，即一行可以放的张数
用懒加载在进行下拉时显示图片DOM案例.懒加载

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            margin: 0 auto;
            height: auto;
            position: relative;
        }
        .item{
            width:200px;
            height:auto;
            padding: 10px;
            
            position:absolute;
        }
        .Picture{
            padding:10px;
            border: 3px solid rgb(162, 182, 215);
            box-shadow: 0 0 5px 5px rgb(197, 198, 198);
        }
        .Picture img{
            width:100%;
        }
    </style>
</head>
<body>
    <div class="container" id="con">
        <div class="item">
            <div class="Picture">
                <img src="./Background-1.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-4.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./蓝色音乐.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./小雏菊.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="QQ图片20231115205718.jpg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-1.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-4.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./蓝色音乐.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./小雏菊.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="QQ图片20231115205718.jpg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-1.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-4.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./蓝色音乐.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./小雏菊.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="QQ图片20231115205718.jpg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-1.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-4.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./蓝色音乐.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./小雏菊.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="QQ图片20231115205718.jpg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-1.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./Background-4.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./蓝色音乐.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="./小雏菊.jpeg">
            </div>
        </div>
        <div class="item">
            <div class="Picture">
                <img src="QQ图片20231115205718.jpg">
            </div>
        </div>
     
    </div>


    <script>

        window.onload = function () {
            waterFall();

            //监听屏幕滚动
            var container = document.getElementById('con');

            document.onscroll = function(){
                var item = document.getElementsByClassName('item');
                if(item[item.length-1].getBoundingClientRect().top < window.innerHeight){
                            container.innerHTML += `
                            <div class="item">
                                <div class="Picture">
                                    <img src="./Background-1.jpeg">
                                </div>
                            </div>
                            <div class="item">
                                <div class="Picture">
                                    <img src="./小雏菊.jpeg">
                                </div>
                            </div>
                            <div class="item">
                                <div class="Picture">
                                    <img src="./蓝色音乐.jpeg">
                                </div>
                            </div>
                            <div class="item">
                                <div class="Picture">
                                    <img src="./Background-4.jpeg">
                                </div>
                            </div>
                            <div class="item">
                                <div class="Picture">
                                    <img src="QQ图片20231115205718.jpg">
                                </div>
                            </div>
                            `;
                        waterFall();
                  
                }//getBoundingClientRect返回元素大小及其位置
            }

            window.onresize = function(){
                waterFall();
            }//跟随浏览器界面
        }

        function waterFall(){
            // 设置容器宽度→拿到浏览器界面的宽度，再拿到一个item的宽度，然后相除
            // 用Math得到一行能排列的个数
            var container = document.getElementById('con');
            var item = document.getElementsByClassName('item');
            var clientWidth = document.documentElement.clientWidth;
            var columnCount = Math.floor(clientWidth/item[0].offsetWidth)
            container.style.width = columnCount*item[0].offsetWidth+"px";



            //如何排列，第一行整体的top都为0，再往下的每一次排列，都要找到上一行高度最小的那个去插空
            let hrr = [];
            for(let i = 0;i < item.length;i++){
                if(i<columnCount){
                //第一行 
                    item[i].style.top= "0px";
                    item[i].style.left= i * item[0].offsetWidth + "px";
                    //把第一行的每一个高度加进去：用push
                    hrr.push(item[i].offsetHeight);
                }else{
                //第一行之后的
                    //设置一个min，找到Math里面的最小
                    var min = Math.min(...hrr);//...为扩展运算符
                    var index = hrr.indexOf(min)
                    item[i].style.top= min + "px";
                    item[i].style.left= index * item[0].offsetWidth + "px";
                    //到以上这一部分，它会把所有的下一行的照片都排列在第一行的最短的那一张图片下面
                    //所以要把下面加了一张图片的那个位置的元素的高度，更新为加了图片之后的高度
                    hrr[index] += item[i].offsetHeight;
                }
            }
        }
    </script>
</body>
</html>
W`hite
关注
  • 23
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端小白--JQ瀑布流+流加载
AIGC大前端小王子
12-13 1793
本文主要通过JQ实现瀑布流加载和流加载
Android入门第64天-MVVM下瀑布流界面的完美实现-使用RecyclerView
lifetragedy的专栏
02-20 3290
时下最潮的瀑布流是怎么实现的？网上很多关于使用RecyclerView实现瀑布流的例子，还留下了许多坑。这是因为网上所有的关于RecyclerView的使用都是错的，本教程内会使用一个生产上的例子，并辅以正、反两个例子基于mvvm设计模式下使用RecyclerView完整讲述和实现一个正确的拥有良好用户体验类淘宝、抖音的瀑布流墙。
实现瀑布流（懒加载）
upup
01-20 458
<!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-U...
【html+css+js】瀑布流布局and懒加载
weixin_62916524的博客
04-10 255
网页瀑布流布局以及懒加载代码
原生JavaScript实现响应式瀑布流懒加载图片布局
Mragon|博客
03-29 896
原生JavaScript实现响应式瀑布流懒加载图片布局 part.1 项目简介 编辑器：Atom 版本管理：Git 代码托管:Github 目录结构： part.2 项目布局 &lt;body&gt; &lt;h2&gt;响应式瀑布流懒加载效果&lt;/h2&gt; &lt;div class="container" id="theContainer"...
图片懒加载的方案
JackChan
06-14 890
图片懒加载的方案
实现瀑布流的几个库以及使用方法
weixin_50236973的博客
05-22 422
实现瀑布流的几个库以及使用方法
浅析瀑布流布局原理及实现方式
热门推荐
qq_47443027的博客
08-29 2万+
一、瀑布流 　　瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。 　　瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 　　瀑
纯CSS瀑布流与JS瀑布流
在线学习web前端开发教程
12-21 137
瀑布流 又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 为什么使用瀑布流 瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时...
iOS开发UI篇—自定义瀑布流控件（蘑菇街瀑布流）
creamy521的专栏
10-09 1110
一、简单说明 关于瀑布流 1.是使用UIScrollView实现的 2.刷新数据（reloadData）方法里面做哪些事情 3.layoutSubviews方法里面做哪些事情 4.模仿UItableView进行设计 完善： 瀑布流控件第一次显示到屏幕上的时候自动的向数据源索要数据，而不需要手动调用。这需要监听View的显示，View的显示有一个方法，叫做willMoveToSuper
瀑布流滚动加载
07-08
此外，还可以使用懒加载（Lazy Loading）技术，只有当图片即将进入视口时才开始加载，进一步提升页面加载速度。 7. **错误处理**：在实现滚动加载的过程中，还需要考虑到网络异常、服务器错误等情况，通过合适的...
瀑布流ajax加载版
04-24
在瀑布流布局中，Ajax加载通常用于实现“无限滚动”或“懒加载”，即当用户滚动到页面底部时，后台通过Ajax请求获取更多数据，并将新数据无缝插入到现有瀑布流中，使用户能无感知地浏览更多内容，降低了用户等待新...
瀑布流(加载更多)完整demo
03-14
2. **JavaScript/jQuery实现**：为了实现动态加载更多内容（也称为无限滚动或懒加载），需要使用JavaScript或者jQuery监听滚动事件。当用户滚动到页面底部时，触发加载新数据的函数，向服务器发送请求获取更多数据，...
瀑布流图片无限加载页特效
10-15
8. **性能优化**：为了提供良好的用户体验，开发者可能考虑了性能优化，比如使用懒加载（Lazy Loading）只在接近可视区域时加载图片，减少初始页面加载时间；或者利用Intersection Observer API来更精确地控制何时...
AJAX瀑布流
06-23
在这个场景中，我们看到"jsp"（JavaServer Pages）被用来作为服务器端脚本语言，"瀑布流"是页面元素布局的一种方式，而"AJAX"（Asynchronous JavaScript and XML）则用于实现异步数据加载，使得页面在不刷新整个页面...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 418
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 582
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 117
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 414
注释很详细，直接上代码……
uniapp瀑布流布局懒加载
09-02
使用uni-app开发壁纸图像小程序可以快速实现瀑布流和懒加载展示功能。瀑布流展示是指将图片按照一定的规则排列在页面上，形成像瀑布流一样的效果。在uni-app中，我们可以使用flex布局和CSS样式来实现瀑布流展示。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值