瀑布流+慢加载

最新推荐文章于 2024-05-19 13:47:41 发布
最新推荐文章于 2024-05-19 13:47:41 发布
阅读量279 收藏
点赞数
分类专栏： 前端（html+css+js） 文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua_Piter/article/details/128710671
版权

一、要求

多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片

二、实验原理

慢加载，主要是对于页面的空间距离进行判断比较，若相等就说明已经到底了，所以我们可以设置一个范围前加入照片，实现一个慢加载的效果

三、实验效果图

瀑布流+慢加载

原代码

<!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">
    <title>Document</title>
    <style>
       *{
    padding: 0;
    margin: 0;
}
#bigbox{
    width: 100%;
    margin: 0 auto;
    position: relative;
    columns: 3;
    column-gap: 10px;
}

.pic img{
    width: 100%;
    height: 100%;
}



    </style>
</head>
<body>
    <body>
        <div id="bigbox">
            <div class="item">
                 <div class="pic">    
                    <img src="./1.jpg" alt="">
                </div>     
            </div>
            <div class="item">
                <div class="pic">
                <img src="./1.jpg" alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.5.jpg" alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.4.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./简动漫js轮播图-2023.1.5.21.47/img/6.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./1.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.1.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">    
                   <img src="./微信图片.7.jpg" alt="">
               </div>     
           </div>
           <div class="item">
               <div class="pic">
               <img src="./简动漫js轮播图-2023.1.5.21.47/img/5.jpg" alt="">
               </div>
           </div>
           <div class="item">
               <div class="pic">
               <img src="./微信图片.9.jpg" alt="">
               </div>
           </div>`
           <div class="item">
               <div class="pic">
               <img src="./微信图片.4.jpg" alt="">
           </div>
           </div>
           <div class="item">
               <div class="pic">
               <img src="./1.jpg" alt="">
           </div>
           </div>
           <div class="item">
               <div class="pic">
               <img src="./微信图片.8.jpg" alt="">
           </div>
           </div>
           <div class="item">
               <div class="pic">
               <img src="./1.jpg" alt="">
           </div>
           </div>
           <div class="item">
            <div class="pic">    
               <img src="./微信图片.8.jpg" alt="">
           </div>     
            </div>
            <div class="item">
                <div class="pic">
                <img src="./简动漫js轮播图-2023.1.5.21.47/img/4.jpg" alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./1.jpg" alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.4.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./1.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.2.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.1.jpg" alt="">
            </div>
            </div>
        </div>
    


    <script>
         var bigbox = document.getElementById("bigbox")
        function returnArr(){
            bigbox.innerHTML+=`<div class="item">
               <div class="pic">
               <img src="./微信图片.8.jpg" alt="">
           </div>
           </div>
           <div class="item">
               <div class="pic">
               <img src="./1.jpg" alt="">
           </div>
           </div>
           <div class="item">
            <div class="pic">    
               <img src="./微信图片.8.jpg" alt="">
           </div>     
            </div>
            <div class="item">
                <div class="pic">
                <img src="./简动漫js轮播图-2023.1.5.21.47/img/4.jpg" alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./1.jpg" alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.4.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./1.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.2.jpg" alt="">
            </div>
            </div>
            <div class="item">
                <div class="pic">
                <img src="./微信图片.1.jpg" alt="">
            </div>
            </div>`
        }
        var isloading = false
        window.onscroll = function(){
        var boxHeight = bigbox.offsetHeight
        var boxTop = bigbox.offsetTop
        var scrollTop = document.documentElement.scrollTop
        var windowHeight = document.documentElement.clientHeight
        var All = Math.round(boxHeight + boxTop)
        var change = Math.round(scrollTop + windowHeight)
        if(isloading) return 
        if(All - change <= 50){
            console.log("到底了")
            isloading = true 

            setTimeout(function(){
                returnArr()
                isloading = false
            },1000)
        }
    }

    </script>
</body>
</html>
黄大帅@lz
关注
专栏目录
js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载（上）
weixin_43139949的博客
07-06 953
js笔记 demo篇（一）之瀑布流布局，图片的懒加载预加载图片的加载图片预加载图片懒加载 图片的加载 img标签加载图片是异步的 在html中图片是加载多少显示多少 默认情况下页面有多少图片就会加载多少图片 那以上三个特性会产生什么问题呢？首先异步加载就会产生一个情况，如果图片过多就会抢站带宽，影响其他资源的加载，使页面加载速度变慢。而加载多少显示多少就会出现，图片渲染一半这种奇怪的现象，影响体验...
瀑布流（集成懒加载）
01-06
在瀑布流中，懒加载尤其重要，因为它避免了一次性加载大量图片导致的页面加载速度慢的问题。只有当用户即将看到某张图片时，该图片才会开始加载，从而节省了带宽，提高了页面加载速度。 在实现瀑布流和懒加载时，...
如何解决iOS瀑布流(UIScrollView或UITableView)运行不流畅
muyu114的专栏
03-14 4064
写的一个程序中用到了瀑布流的展现方式，但是发现当图片数量太大的时候，在iPhone4上会不流畅，这点很不爽。 写代码之初是做了一些优化的，比如cell重用，异步加载，但是还是很卡。 终于后来发现了症结所在，那就是，如果滑动太快，可能同时就发出了比如10个图片请求。这些请求虽然都在后台运行，但是它们可能在同一个时间点返回UI线程。这个时候如果加载图片到UIImageView太频繁，就会造成UI卡
Vant瀑布流延迟加载的应用
jyn15159的博客
10-14 1071
延迟加载 瀑布流上拉加载新的数据时,给予一定的延迟效果，让数据的加载不要太快(不要感觉很着急的样子)，提高用户体验。 可以创建延迟器，实现延迟加载的效果。 示例代码： // main.js文件 // 创建一个延迟器， // 给Vue增加继承成员，名称$sleep，也可以自定义为其他 Vue.prototype.$sleep = time => { // 返回一个Promise对象，应用端可以设置async/await使得异步变为同步， // 同步可以使得后续代码都按照先后顺序执行 re
html延迟加载布局,解决瀑布流风格lazyload延迟加载后布局错位问题
weixin_29806483的博客
06-09 389
在使用瀑布流模板时，如果你想用lazyload延迟加载技术来延迟加载图片，你就会发现所有本来可以自动根据图片大小堆上去的瀑布流小方格都会错位叠在一起了。这是为什么呢？其实道理很简单，在启用lazyload后，是用一张1个像素的超小图片替换所有的图片，这样瀑布流布局就无法计算出真实的占位图片大小，也就没办法确定方块的布局了。所以要解决瀑布流错位问题的关键就是要在加载被延迟加载的图片后重新排列布局(r...
前端提高篇(109):解决瀑布流在最短列添加图片失效和多次重复请求数据的问题
安之ccy的博客
04-12 532
瀑布流在最短列添加图片失效 用ajax实现瀑布流，设置了在最短列添加图片，但是有时刷新，图片却一溜烟加在某列上 部分代码如下： 给每个img包裹一层div，判断最短列后，将div插入到该列下 原因：图片加载太慢 添加下一张图片，需要计算当前每个li高度，这时前面添加的图片还未完全获取到，导致高度的计算失效，如果没有padding，相当于每次加载图片，高度仅加0，新加载的图片一直加在某一列上，直至某张图片加载完成，才可能改变局势 就像这样：后面红色的框代表没有加载完成的图片，仅靠padding撑起高度，前面
瀑布流布局，点击加载更多效果
10-18
在数据加载完成后，利用layui的DOM操作方法将新数据插入到页面，然后重新调整瀑布流的布局，保持其美观和一致性。 总的来说，瀑布流布局结合jQuery和layui，可以构建出既美观又具有高性能的图片或商品展示页面。...
Vue3+TS：实现小红书瀑布流虚拟列表组件.zip
04-03
在传统的瀑布流布局中，所有列表项都会一次性渲染在DOM中，这可能导致页面加载慢，性能下降。虚拟列表只渲染视口内的元素，当用户滚动时，重新渲染即将进入视口的新元素，从而极大地提高了页面性能。 在Vue3中，...
瀑布流——上拉加载+下拉刷新
11-17
在瀑布流布局中，上拉加载通常需要与分页技术结合，每次加载一定数量的新内容，以保持页面流畅性。 下拉刷新，常见于各种新闻、社交应用，允许用户通过在顶部向下滑动屏幕来刷新内容。这是一种即时获取最新信息的...
Waterfalls-Flow:对懒加载式瀑布流的尝试
03-04
瀑布流布局，也被称为Masonry布局，是一种常用于图片展示或内容排列的网页设计技术，其特点是内容元素在页面上自适应地垂直排列，形成一种类似瀑布的效果，每一列的宽度可能不同，随着滚动页面，内容会动态加载，这...
8款Jquery+html5实现无限加载瀑布流特效
10-17
8款Jquery+html5实现无限加载瀑布流特效源码，亲测可用，拿来即用。
瀑布流优化设计
ztyqwe789的博客
01-25 1028
需求： 优化商品列表的瀑布流展示 1、商品：包含图片和文案、分页请求的、一行两列 2、图片：宽高不固定，懒加载 现状： 现有的方案是页面两个div，即两个管道，一个一个渲染商品项，判断两个管道哪一个高度小，就在小的管道最后插入一个商品。这种设计方案存在的问题是商品会插入到较高的管道上，原因是：图片是懒加载的，即图片的渲染是延时的，在取管道高度时，图片存在渲染未完成的情况，导致获取到的管道高度并不是真实的高度。 解决方案： 提前获取到图片的真实宽高，可以根据img元素节点获取到图片的真实宽高的“
RecyclerView瀑布流显示图片很卡顿
suwanshen6136的博客
01-01 1987
用RecycleView以瀑布流的方式显示图片会特别卡顿，向下滑动都是一卡一卡的，而且加载的是资源文件里的图片，还不是网络图片，我在侧边栏里的Fragment中用的RecyclerView，滑动侧边栏的时候，侧边栏感觉都是一帧一帧的出来的，请问是什么原因？
瀑布流和图片的懒加载--配合节流函数--完整js代码
weixin_44524243的博客
08-17 343
瀑布流在上一篇已经说了我实现的思路和方法，不懂原理的小伙伴可以去看看，当然这一篇代码是继着上一篇的瀑布流来实现的，也可以直接在这里看代码，代码中的注释都齐全。 代码的实现是我手撸，但是思路是网上看各大佬的讲解来的，然后自己优化了点，加了节流和更直观的看到懒加载的情景。这里主要是为了附上完整的代码，方便各位看官能去直接ctrl+C 懒加载 概念：为了减少流量，提升网站性能，图片展示型网站会采用懒加载。一般第一屏的图片直接显示，从第二屏开始采用懒加载。（大概就是这个意思） 实现思路 ① 通常的做法是在对标签.
瀑布流+长列表+懒加载处理方案
最新发布
chengbo_eva的博客
05-19 929
瀑布流+长列表+懒加载处理方案
超级简单的瀑布流加载数据
热门推荐
花神的博客
03-21 1万+
瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
Vue中如何进行瀑布流布局与图片加载优化
徐师兄的博客
06-14 2618
除了使用第三方插件，我们还可以自己编写组件来实现瀑布流布局。下面是一个简单的示例代码。
瀑布流加载大量图片解决方案
没有机器的世界
01-02 1112
方案一: 异步加载，从内存中读取图片。 方案二: 预加载，把所有图片通过软引用加载到内存在
jquery 下拉加载+ 瀑布流+mustache
09-25
下面是一个基于 jQuery 的下拉加载、瀑布流和 Mustache 模板的示例代码： HTML 部分： ```html <div id="content"></div> <div id="loading">Loading... ``` CSS 部分： ```css #content { column-count: 3; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值