js实现瀑布流布局--无限加载

最新推荐文章于 2021-09-25 12:26:23 发布
最新推荐文章于 2021-09-25 12:26:23 发布
阅读量830 收藏 2
点赞数 4
分类专栏： html 瀑布流 文章标签： html js css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38980678/article/details/114703623
版权

1.实现瀑布流布局思路

准备好数据之后

  1. . 绑定滚动事件
  2. . 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）
  3. . 加载新数据，渲染新页面
  4. .重新执行瀑布流效果

2.代码（更换图片路径之后可直接运行）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{margin: 0 auto;background: #ccc;position: relative;}
        .cont::after{content: "";display: block;clear: both;}

        .box{float: left;padding: 6px;}

        .imgbox{border: solid 1px black;padding: 6px;border-radius: 6px;}
        
        .imgbox img{width: 200px;display: block;}
    </style>
    <script src="data/data.js"></script>
    <script>
        // W1. 准备数据
        // W2. 绑定滚动事件
            // W3. 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top）
            // W4. 加载新数据，渲染新页面
            // W5. 重新执行瀑布流效果
        onload = function(){
            new Waterfall;
        }
        class Waterfall{
            constructor(){
                // 1.选择元素
                this.box = document.querySelectorAll(".box");
                this.cont = document.querySelector(".cont");
                this.clientH = document.documentElement.clientHeight;
                this.heightArr = [];
                // 2.补全布局
                this.init();
                this.addEvent();
            }
            addEvent(){
                var that = this;
                onscroll = function(){
                    var scrollT = document.documentElement.scrollTop;
                    if(that.clientH + scrollT > that.scrollH-300){
                        that.render()
                    }
                }
            }
            render(){
                for(var i=0;i<data.length;i++){
                    var img = document.createElement("img")
                    img.src = data[i].src;
                    var imgbox = document.createElement("div")
                    imgbox.className = "imgbox";
                    var box = document.createElement("div")
                    box.className = "box";
                    imgbox.appendChild(img);
                    box.appendChild(imgbox);
                    this.cont.appendChild(box);
                }
                // 初始化所有
                this.box = document.querySelectorAll(".box");
                this.heightArr = [];
                // 重新渲染瀑布流结构
                this.firstLine();
                this.otherLine();
            }
            init(){
                // 计算一行最多能放几个，再计算最大宽度
                this.clientW = document.documentElement.clientWidth;
                this.boxW = this.box[0].offsetWidth;
                this.maxNum = parseInt(this.clientW / this.boxW)
                this.cont.style.width = this.boxW * this.maxNum + "px";

                // 3. 区分第一行
                this.firstLine()
                // 4. 区分其他行
                this.otherLine();
            }
            firstLine(){
                // 5. 获取所有元素的高度，存起来
                for(var i=0;i<this.maxNum;i++){
                    this.heightArr.push(this.box[i].offsetHeight);
                }
            }
            otherLine(){
                for(var i=this.maxNum;i<this.box.length;i++){
                    // 6. 拿到第一行所有的高度
                    // console.log(this.heightArr)
                    // 计算最小值和最小值的索引
                    // var min = getMin(this.heightArr);
                    // var min = Math.min.apply(null,this.heightArr);
                    var min = Math.min(...this.heightArr);
                    var minIndex = this.heightArr.indexOf(min);
                    // console.log(minIndex);
                    // 7. 设置元素的定位
                    this.box[i].style.position = "absolute";
                    // 8. 设置元素的top和left
                    this.box[i].style.top = min + "px";
                    this.box[i].style.left = minIndex * this.boxW + "px";
                    // 9. 修改最小值
                    this.heightArr[minIndex] += this.box[i].offsetHeight;
                }
                this.scrollH = document.documentElement.scrollHeight;
            }
        }
        function getMin(arr){
            // 先对数组进行截取（为了深拷贝）
            // 然后对截取出的新数组排序
            // 找第0位
            // 返回出去
            return arr.slice(0).sort((a,b)=>a-b)[0];
        }
        
    </script>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="../imgs/10.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>
噢，我明白了
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
瀑布流简介与JS简易实现
qq_45698096的博客
04-16 2420
瀑布流简介与JS简易实现 瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。 （本文主要介绍JS实现部分，html部分甚为简略，后会将代码一同贴在文章结尾处） 特点 1.瀑布流对用户来说有着很强的吸引力，瀑布流会在它的页面底部给用户不断地加载新的暗示信息，通过给出不完整的视觉图片去吸引你的好奇心，让你
vue瀑布流组件滑动加载更多
热门推荐
本杰明的博客
07-18 1万+
建议先看上一篇再来食用本文，如果直接想看源码文末就是~上一篇讲到在项目中使用上拉加载更多组件，但是由于实际项目开发中由于需求变更或者说在webview中上拉加载有些机型在上拉时候会把webview也一起上拉导致上拉加载不灵敏等问题，我们有时候也会换成滑动到底部自动加载的功能。既然都是加载更多，很多代码思想势必相似，主要区别在于上拉和滑动到底部这个操作上，所以，我们需要注意： 上拉加载是point指针
js实现瀑布流加载(数据加载以及图片加载)
赵佳敏的博客
09-25 1650
@TOC 一、数据的瀑布流加载 <script> //模拟数据 var stulist = []; var nowPage=1; var pageNum=10; var totle=Math.ceil(stulist.length/pageNum); var parEle=null; window.onload=function (){ parEle=document.getElementsByClassNam.
用JS简单实现图片瀑布流 + 无限瀑布流效果
qq_26705343的博客
02-20 533
<!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-UA-Compatible" content="ie=edge"> <title>Document&l
对于一个无线下拉加载图片的页面，如何给每个图片绑定事件
weixin_33755847的博客
04-06 272
我们设定一种场景，如下代码，一个中包含了若干个，而且还能继续增加。那如何快捷方便的为所有的绑定事件呢？ <div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#"&gt...
原生JS瀑布流布局，无限加载
09-01
原生JS瀑布流布局，无限加载
JavaScript实现瀑布流以及加载效果
10-20
【JavaScript实现瀑布流及其加载效果】瀑布流布局是一种常见的网页设计模式，最早由Pinterest引入，其特点是内容以不规则的多列形式呈现，随着页面滚动不断加载新的内容。这种布局方式在图片展示类网站中尤为常见，...
原生JavaScript实现瀑布流布局
10-23
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
html-无限加载瀑布流(含动画效果)-源码
最新发布
09-06
瀑布流布局是一种新型的布局方式，可以将大小不一的图片完整的显示在页面上，并且在杂乱的布局中保持着一定的美感。它是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种...
CSS3实现瀑布流布局与无限加载图片相册的实例代码
09-24
本文将详细介绍如何使用CSS3来创建瀑布流布局，并实现无限加载图片相册。 首先，我们来看一下`pic1.html`页面的代码。在这个例子中，HTML结构主要是包含多个`.item`类的`<p>`元素，每个`<p>`元素内部包含一个`<img>...
JS实现页面数据无限加载
10-21
主要为大家详细介绍了JS实现页面数据无限加载,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
上拉加载更多后台数据_VUE指令：无限上拉加载更多插件
weixin_39765588的博客
12-04 481
前言无限上拉加载更多，在很多场景都有使用，无论是PC还是移动端，尤其是移动端，都应用非常广泛，比如掘金、头条等。 都知道，无论是下拉，亦或是上拉，都是基于滚动条的位置而言的，如果滚动条触底，表示需要加载更多了，而触顶，再次下拉，表示刷新。看个简单的代码示例：let list = []let pageSize = 10let pageNo = 1// 刷新function refresh(){ li...
JS实现无限分页加载——原理图解
weixin_34054866的博客
12-16 230
由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。 有很多网站使用 无限分页 的模式，即网页视窗到达内容底部就自动加载下一部分的内容... 本篇就无限分页的实现模型，讲述其中奥妙。 原理图 实现无限分页的过...
仿“今日头条”效果的js无限滚动加载
huangpb的博客
06-01 1846
效果 《今日头条》网页里页面向下滚动时，新闻会不断的追加。查看了dom 元素，他们是把新请求到的新闻不断地追加到 ul 里。 思路 1.判断网页是否滚动到了底部，并且当前没有请求在执行 2. 请求数据 3. 追加数据 细节 1. 可以规定距离页面底部多少距离算底部（这里用的是20），在这个区域内会请求数据 2. 用一个状态锁isFetching 判断当前有没有请求正在执行，有...
瀑布流点击图片跳转页面
shijiang7096的博客
12-29 617
要实现的效果就是点击瀑布流里面的图片，然后会根据图片的不同跳转到不同的界面。现在手里有个别人的源码，实现了图片的监听，但是跳转我就不会了，拜托大神指点下
js滚动加载图片瀑布流
beichen3997的博客
05-22 359
&lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head lang="en"&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;&lt;/title&gt; 6 &lt;link rel="stylesheet" h
JS实现-页面数据无限加载
weixin_33995481的博客
09-14 345
原文链接： http://www.cnblogs.com/w-wanglei/p/5863387.html 在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果： 当滚动条滚动到页面底部时，提示“正在加载…”。 当页面已...
JavaScript实现无限瀑布流
cathei的博客
08-10 659
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         #wrap{             wi
瀑布流(无限加载)
qq_48930299的博客
03-11 176
html代码(自己创建images放入图片) <!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"&
vue实现瀑布流布局
07-28
Vue可以通过使用第三方库来实现瀑布流布局。一个常用的库是Masonry，它提供了一个Vue组件来实现瀑布流布局。 首先，你需要安装Masonry库。可以通过命令行运行以下命令来安装： ``` npm install vue-masonry --save...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值