js瀑布流可加载更多

最新推荐文章于 2022-05-13 10:57:45 发布
最新推荐文章于 2022-05-13 10:57:45 发布
阅读量465 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40791843/article/details/93980589
版权
  1. 第一个是html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/css1.css">
    <script src="瀑布流js.js"></script>
</head>
<body>

    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            </div>
        </div>
    </div>
</body>
</html>
  1. 第二个是css文件
*{
    margin: 0px;
    padding: 0px;
}
img{
    width: 150px;
    height: aotu;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}

#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
  1. 第三个是js文件
window.onload = function () {
    imgLocation("container","box");
    var imgData = {"data":[{"src":"../Image/1.jpg"},{"src":"../Image/2.jpg"},{"src":"../Image/3.jpg"},
            {"src":"../Image/4.jpg"},{"src":"../Image/5.jpg"},{"src":"../Image/6.jpg"},
            {"src":"../Image/7.jpg"},{"src":"../Image/8.jpg"},{"src":"../Image/9.jpg"},{"src":"../Image/10.jpg"}]}
    window.onscroll = function () {
        if (checkFlag()){
            var cparent = document.getElementById("container");
            for (var i = 0;i < imgData.data.length;i++){
                //创建一个div元素 box
                var ccontent = document.createElement("div");
                ccontent.className = "box";
                //放在container里面
                cparent.appendChild(ccontent);
                //创建一个div元素 box_img 放在 box 里面
                var boxImg = document.createElement("div");
                boxImg.className = "box_img";
                //将box_img放在box 里面
                ccontent.appendChild(boxImg);
                //创建图片节点
                var img = document.createElement("img");
                //图片的来源是 上面定义的数组内的
                img.src = imgData.data[i].src;
                //将图片添加在box_img 里面
                boxImg.appendChild(img);
            }
            imgLocation("container","box");
        }
    }
}
function checkFlag() {
    var cparent = document.getElementById("container");
    var cconent = getChildElement(cparent,"box");
    var lastContentHeight = cconent[cconent.length - 1].offsetTop;
    //滚动条滚动的时候，值一点一点的在增加 获取滚动条的位置
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //浏览器窗口的大小
    var pageHeight = document.documentElement.clientHeight||document.body.offsetHeight;
    //如果滚动条的位置加上 页面的高度 大于 最后一张图片的位置高度
    if (lastContentHeight < scrollTop + pageHeight){
        return true;
    }

    //console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
}
function imgLocation(parent,content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent,content);//得到10个name为box的div
    var imgWidth = ccontent[0].offsetWidth;
    //var width = document.documentElement.clientWidth;
    var calc = Math.floor(document.documentElement.clientWidth / imgWidth);
    //以下一行代码 是设置父节点div标签的宽度 一定要注意 width后面有冒号:
    //设置了之后 页面的布局就不会随着我们拉动页面大小 图片位置发生变化了
    cparent.style.cssText = "width:" + (imgWidth * calc) +"px;margin:0 auto";

    var BoxHeightArr = [];
    for (var i = 0;i < ccontent.length;i++){
        //这里ccontent.length == 10 calc == 8
        if(i < calc){
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }else {
            //得到高度最低的图片的高度
            var minHeight = Math.min.apply(null,BoxHeightArr);
            //得到高度最低的图片的位置索引
            var index = getMinHeightLocation(BoxHeightArr,minHeight);
            //设置位置为绝对定位
            ccontent[i].style.position = "absolute";
            //将其余的图片放入到最短高度的图片下面
            ccontent[i].style.top = minHeight + "px";
            //图片向左居中
            ccontent[i].style.left = ccontent[index].offsetLeft+"px";
            //此时高度最低的图片高度 == 本身高度+加上去的图片的高度
            BoxHeightArr[index] = BoxHeightArr[index] + ccontent[i].offsetHeight;
        }
    }
}
//找到高度最低的图片的索引
function getMinHeightLocation(BoxHeightArr,minHeight) {
    for (var i in BoxHeightArr){
        if (BoxHeightArr[i] == minHeight){
            return i;
        }
    }
}
//得到name为box的节点数组
function getChildElement(parent,content) {
    var contentArr = [];
    //得到所有元素
    var allcantent = parent.getElementsByTagName("*");
    for (var i = 0;i < allcantent.length;i++){
        //如果节点的className == "box"
        if (allcantent[i].className == content){
            //那么元素加入到 contentArr数组里面
            contentArr.push(allcantent[i]);
        }
    }
    return contentArr;
}

在这里插入图片描述

小白葫芦
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现瀑布流加载(数据加载以及图片加载)
赵佳敏的博客
09-25 1658
@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.
瀑布流效果 滚动到底部加载更多
12-21
JS,JQ瀑布流效果 滚动到底部加载更多 非常实用的代码 前端必备
PHP瀑布流下拉滚动时加载更多图文_瀑布流带数据库
03-27
PHP瀑布流简介： 1、为了简单操作，数据库使用了access 2、采用PHP+Ajax开发 3、带有社交网站分享功能 4、导航菜单固定
实现瀑布流布局的四种方法
热门推荐
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
html瀑布流布局layui,Blocksit+Layui实现响应式瀑布流加载
weixin_35756624的博客
06-21 893
前言流加载是一种比较酷炫的数据加载方式，它类似分页却又不同于分页，可以随着滚动条的滚动，不断加载数据展现给用户。瀑布流是一种比较美观的布局方式，它可以让你不必计较每个div块的高度，自然而然的展现给用户。相关组件Blockslt：基于jQuery的瀑布流布局插件。官网Layui(flow模块+jquery模块)：模块化前端框架。官网准备工作由于我们使用了layui框架，而layui封装了jquer...
瀑布流布局，点击加载更多效果
10-18
实现这一效果，可以在页面底部添加一个“加载更多”按钮，当用户点击该按钮时，通过Ajax异步请求获取新的数据，然后使用jQuery将新数据插入到布局中，并更新瀑布流的结构。 layui是一款轻量级的前端UI框架，它提供...
js实现瀑布流并可加载更多
05-30
通过理解和掌握这些知识点，你可以用JavaScript实现一个功能完善的瀑布流布局，并且具备“加载更多”功能，以适应不断变化的网页内容需求。在实际项目中，你可能还需要考虑性能优化、错误处理、用户交互等方面的细节...
JavaScript实现瀑布流以及加载效果
10-20
【JavaScript实现瀑布流及其加载效果】瀑布流布局是一种常见的网页设计模式，最早由Pinterest引入，其特点是内容以不规则的多列形式呈现，随着页面滚动不断加载新的内容。这种布局方式在图片展示类网站中尤为常见，...
vue瀑布流组件实现上拉加载更多
10-15
Vue瀑布流组件实现上拉加载更多的功能是一种常见的前端页面设计，尤其在移动端H5页面中广泛应用。瀑布流布局，也称为Masonry布局，是将不同高度的元素在垂直方向上进行排列，形成类似瀑布流的效果。而上拉加载更多则...
原生JS瀑布流布局，无限加载
09-01
在原生JavaScript中实现瀑布流布局，不仅可以避免对特定库或框架的依赖，还能提高页面性能，特别是在处理大量数据和动态加载时。 一、瀑布流布局的基本原理 1. 确定列数：首先，我们需要确定页面的列数。这通常基于...
java编辑瀑布效果
06-06
java瀑布粒子效果
HTML前端实现瀑布流无限加载
DYBOY-程序开发&网络安全
02-28 1081
瀑布流加载是一种不错的前端加载方式，用户的体验也还不错。本次尝试中涉及到布局、图片追加、滚动条监控的内容 主要实现步骤：计算获取高度最低列，添加图片到其下，定时器每次添加图片，下拉加载问题 0x01 布局 前端的布局使用到了flex弹性布局 前端显示图片部分的HTML代码： &lt;div class="gallary"&gt; &lt;!-- 第一列 --&gt; &lt;div cl...
Html+Css+Js瀑布流式的不断加载数据（完整代码+详解）
qq_38170526的博客
08-02 2481
一，问题描述 页面的数据浏览完后是需要加载的，当浏览到页面底部时，没有了内容，滚动滚动条就会自动加载后面的数据。 二，效果预览 三，用到的主要事件 window.onload：页面加载事件 window.onscroll：滚动条滚动事件 四，完整代码 代码结构 Html代码 <!DOCTYPE html> <html> <head> ...
超级简单的瀑布流加载数据
花神的博客
03-21 1万+
瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
jQuery+css实现瀑布流布局(无限加载)
huanhuan03的博客
03-09 1045
jQuery+css瀑布流 无限加载
js原生瀑布流并实现滚动懒加载（兼容IE8）
三哥玩前端
09-28 4189
最近公司接的新项目，客户要求要把图文列表的形式给写成瀑布流的形式，what？我仔细一想，应该不是很难，毕竟前端是万能的嘛，嘿嘿，之前我也听过瀑布流布局，比如淘宝，天猫等都是用的瀑布流布局，我不知道怎么生成的，于是我就上网找插件，有些插件还不错，不过我想自己写自己的代码，我看别人代码，主要看瀑布流的原理，然后根据原理自己写代码，然后再看慕课网之类的教学网站汲取经验，终于一个瀑布流被我搞出来了，本篇是...
JavaScript实现瀑布流布局以及页面的自动加载
凛家Dear Love L的博客
08-28 3545
在接触JavaScript之前，我们使用CSS进行页面布局的，我们来回顾一下怎样使用CSS实现瀑布流布局的？ test1：使用到CSS中的一个属性column，之后我们可以指定容器的列数、列间距、列中间边距、列宽度来实现。 #container { -webkit-column-count: 5； /*-webkit-column-gap: 10px；
JS瀑布流下拉加载数据效果
顛沛流離的小時光
04-21 796
瀑布流下拉加载数据的效果
vue实现瀑布流展示视频列表并实现向下滚动加载更多
最新发布
10-01
要实现瀑布流展示视频列表并实现向下滚动加载更多，可以按以下步骤进行操作： 1. 安装Vue和其他必需的依赖项。可以使用npm或者yarn来安装。 2. 创建一个Vue实例，并在HTML中定义一个容器来显示视频列表。使用Vue的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值