JavaScript瀑布流

最新推荐文章于 2022-05-12 09:59:45 发布
最新推荐文章于 2022-05-12 09:59:45 发布
阅读量305 收藏 1
点赞数 1
分类专栏： javascript 文章标签： js瀑布流效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wp7021/article/details/79238673
版权

js瀑布流原理：

 1、计算一行能放几张图片，假如为num（当前可视区宽度 / 图片宽度（这里图片宽度是规定好的一个固定值，所有图片宽度一样））      

 2、获取一行中最矮的那张图片，让第索引号大于num的图片放到最矮的图片后面

3、当当前可视区域高度加上滚动条滚动高度大于最后一张图片距离顶部的高度时再加载其他图片，其他图片的加载就是重复上面的步骤

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #container {
            position: relative;
        }
        .box {
            padding:5px;
            float: left;
        }
        .img-box {
            padding:5px;
            border:1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
            border-radius:5px;
            overflow: hidden;
        }
        .img-box img {
            width: 150px;
            height:auto;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>


</div>
<script>
    window.onload = function(){
        var container = document.getElementById("container");
        var Imgs = getChildEle(container,"box");
        imgLocation(Imgs);
        var imgData = {"data":[{"src":"jd1.png"},{"src":"jd2.png"},{"src":"right.png"},{"src":"rss.png"},
            {"src":"search.jpg"},{"src":"mi.png"},{"src":"cloud.gif"}]}   // 模拟后台的数据
        window.onscroll = function(){
            var flag = loadFlag();
            if(flag){
                for(var i = 0; i < imgData.data.length; i++){
                    var Box = document.createElement("div");
                    Box.className = "box";
                    container.appendChild(Box);
                    var imgBox = document.createElement("div");
                    imgBox.className = "img-box";
                    Box.appendChild(imgBox);
                    var img = document.createElement("img");
                    img.src = "images/"+ imgData.data[i].src;
                    imgBox.appendChild(img);
                }
                var NewImgs = getChildEle(container,"box");
                console.log(NewImgs.length)
                imgLocation(NewImgs);
            }
        }
//        获取所有图片盒子
        function imgLocation(imgs){
            var imgWidth = imgs[0].offsetWidth;
            var colsNum = Math.floor(client().width / imgWidth)  //  一行能放的图片张数
            container.style.cssText = "width:" + imgWidth * colsNum+ "px;margin: 0 auto";  // 设置最大容器的宽度
            var len = imgs.length;
            var imgsBoxHeight = [];
            for(var i = 0; i < len; i++){
                if(i < colsNum){
//                    只获取一行中所有图片盒子的高度
                    imgsBoxHeight[i] = imgs[i].offsetHeight;
                }else{
                    var minHeight = Math.min.apply(null,imgsBoxHeight);  // 获取一行盒子中最小高度
                    var minIndex = getminBoxIndex(imgsBoxHeight,minHeight)  // 获取一行盒子中最小高度盒子的索引
                    imgs[i].style.position = "absolute";
                    imgs[i].style.top = minHeight + "px";
                    imgs[i].style.left = imgs[minIndex].offsetLeft + "px";
                    imgsBoxHeight[minIndex] = imgsBoxHeight[minIndex] + imgs[i].offsetHeight;  //  重新给最小盒子赋值高度，此时最小盒子的高为他自身高加上拼接在它后面的盒子高度和
                }
            }
        }
        function getChildEle(parent,content) {   //  获取所有的图片盒子
            var imgsBox = [];
            var allImgs = parent.getElementsByTagName("*");
            for(var i = 0; i < allImgs.length; i++){
                if(allImgs[i].className == content){
                    imgsBox.push(allImgs[i]);
                }
            }
            return imgsBox;
        }
        function client() { // 获取可视区的宽高兼容方法
            if(window.innerWidth != null){
                return {
                    width: window.innerWidth,
                    height: window.innerHeight
                }
            }
            else if(document.compatMode === "CSS1compat"){
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
            else{
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            }
        }
        function getminBoxIndex(imgsBoxHeight,minHight){
            for(var i in imgsBoxHeight){
                if(imgsBoxHeight[i] == minHight) {
                    return i
                }
            }
        }
        function loadFlag(){  //  控制下拉是否加载图片
            var imgs = getChildEle(container,"box");
            var lastImgHeight = imgs[imgs.length-1].offsetTop;
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var pageHeight = client().height;
            if(lastImgHeight < scrollTop + pageHeight){
               var flag = true;
            }
            return flag;
        }
    }
</script>
</body>
</html>


wp1119
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript瀑布流的实现
bhegi_seg的博客
03-08 101
瀑布流的核心 1, 根据 ajax请求的响应体结果 动态渲染生成页面 请求地址 请求方式 参数键名 都是 后端程序定义的 前端 只能根据需求 定义 携带的具体的参数数据 响应体数据是后端程序返回的数据结果 只能获取数据结果 不能修改数据结果 可以根据 响应体数据结果 动态渲染生成页面内容 可以使用 三元运算符 给标签定义属性等 2, 瀑布流 再次 发起请求的判断依据 上卷高度 + 视窗窗口高度 + 预留高度 > 最矮ul占位高度 3, 函数的节流 同时触发 多次执行 相同的函数程序 只需要触发执行
【JavaScript】瀑布流布局
等时钟成长
07-13 1613
瀑布流布局
JavaScript 瀑布
司马懿的西山居
01-25 1158
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <meta http-equiv=“X-UA-Compatible” content="IE-edge, chrome=1"> <meta name="viewport" content="width=device-width, initia
原生 JavaScript 瀑布流
weixin_68903201的博客
05-12 59
原生 JavaScript 瀑布流原生 JavaScript 瀑布流
JavaScript瀑布流布局效果
qq_45216853的博客
04-18 131
瀑布流 根据可视窗口进行变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
CSS3&JavaScript 瀑布流
司马懿的西山居
11-28 1301
实现方法概述 html页面要实现瀑布流，目前有两种方案，它们的适用场景不同 CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现，且元素与位置依赖度不高的传统布局上） CSS2 的 flot 配合 JavaScript 动态测量（适用于所有元素分批加载，滑动到底部自动添加下一批元素的情况） 当然，网上还有介绍 CSS3 的 grid 方案，很可惜，目前为止，所...
javascript 瀑布流
莱茵金属
03-09 807
现在图片网与商城流行一种叫“瀑布流”的布局，我们公司也不小心得了“流行性感冒”，要搞这个。于是我就写了一个，现在再用我的框架mass重写一下，发布出来，顺便宣传一下我的框架。 瀑布流其实没什么东西，就是列布局与无限拖的结合。由于要支持IE6就没有CSS3，直接对列进行绝对定位。列就是一个DIV。然后就是列中每个板块的添加问题，我管它为砖头。每添加一块砖头前，比较一下哪列最短，就往哪里塞。最后就是
javascript实现瀑布流
weixin_44456354的博客
12-28 61
javascript实现瀑布流 html、css部分 图片部分可自己上网找 <!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" c
JavaScript瀑布流的实现以及底部刷新
gxf_ming的博客
03-24 437
JavaScript瀑布流的实现以及底部刷新  分类： 前端学习笔记（4）  版权声明：本文为博主原创文章，未经博主允许不得转载。 通过使用JavaScript来实现瀑布流，我们可以对JS了解的更加深刻。 我们知道在不使用浮动属性的时候，图片会按照在html代码里的顺序依次排列，而我们想要实现瀑布流，就应该把页面上每行都固定住，然后
javascript瀑布流（照片墙）
qq_38401285的博客
03-12 1016
一个小白的开始~html代码：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;瀑布流&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div id=&
javascript瀑布流布局实现方法详解
10-22
总的来说，实现JavaScript瀑布流布局需要理解HTML结构、CSS样式以及JavaScript事件和DOM操作。通过对元素的动态布局和数据的实时加载，我们可以创建出一个既美观又响应式的瀑布流布局。这种布局方法在博客、产品展示...
Javascript瀑布流
03-18
JavaScript瀑布流是一种网页布局方式，它使得网页元素（通常是图片或卡片式内容）在垂直方向上像瀑布一样连续排列，每个元素的宽度一致，而高度则根据内容自适应，形成一种错落有致的视觉效果。这种布局在新闻网站、...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局是一种常见的网页设计布局方式，常用于展示大量且尺寸不一的内容，如图片、文章摘要等。它的特点是内容元素（如图片）在页面上以多列的形式呈现，每列的高度根据其中元素的最高内容自适应，形成...
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
07-04
JavaScript瀑布流布局是一种常见的网页设计模式，常用于展示图片或者文章列表，使它们自适应不同屏幕尺寸，呈现出一种像瀑布一样流动的效果。这种布局方式在响应式设计中尤其受欢迎，因为它能够有效地利用有限的空间...
解析javascript瀑布流原理实现图片滚动加载
01-19
先科普下瀑布流吧 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是...
源生js轮播图组件
wp7021的博客
01-30 1647
原生javascripts 轮播图 一、无缝滚动轮播图 无缝滚动 *{ margin:0; padding:0; } .box { width: 600px; height: 200px;
数组常用方法和属性
wp7021的博客
01-31 775
数组常用属性和方法 一、常用属性 1、length 使用length 应该注意的问题 （javascript 很容易因为length 的问题导致整个数组的长度修改） 1、对 arr 的length 赋值会导致 arr修改 例：  var arr1 = [1,3,5,14,24]; var arr2 = [1,3,5,7,9]; arr1.length = 7 arr2.len
JavaScript的innerWidth与innerHeight
wp7021的博客
01-30 587
JavaScript的innerWidth与innerHeight 这两个属性是window对象的只读属性,声明了窗口的文档显示区的高度和宽度，以像素(px)为计量单位。 (注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) 兼容写法：   function client() { if (window.innerWidth != null) {
javascript知识碎片
wp7021的博客
01-30 553
这里记录下一些js容易忘的知识 1、乘方和开根号 Math.pow(a,b)      →        a的b次方 Math.sqrt(a)          →       a开方 2、用户输入 prompt就是专门用来弹出能够让用户输入的对话框的，但必须要用一个变量来接受用户输入的值 例： var a = prompt("请输入内容")结果： 3、docu
js瀑布流
最新发布
06-01
这里是一个简单的 JavaScript 瀑布流实现的代码，可以供您参考： ```html <!DOCTYPE html> <html> <head> <title>瀑布流示例</title> <style> #container { width: 800px; margin: 0 auto; } .item { width: 380px; margin: 10px; padding: 10px; border: 1px solid #ccc; float: left; background-color: #f0f0f0; } </style> </head> <body> <div id="container"> <div class="item">这是第一个瀑布流元素</div> <div class="item">这是第二个瀑布流元素</div> <div class="item">这是第三个瀑布流元素</div> ... <div class="item">这是最后一个瀑布流元素</div> </div> <script> window.onload = function() { var container = document.getElementById('container'); var items = container.getElementsByClassName('item'); var columns = 3; // 3列 var column_heights = [0, 0, 0]; // 列高度初始化为0 for (var i = 0; i < items.length; i++) { var shortest_column = 0; for (var j = 1; j < columns; j++) { if (column_heights[j] < column_heights[shortest_column]) { shortest_column = j; } } items[i].style.left = (shortest_column * 400) + 'px'; // 400是item的宽度加上margin的宽度 items[i].style.top = column_heights[shortest_column] + 'px'; column_heights[shortest_column] += items[i].offsetHeight + 20; // 20是item的margin-top和margin-bottom的高度 } } </script> </body> </html> ``` 这个代码实现了一个简单的瀑布流布局，包含了3列，每列宽度固定为380px，每个元素之间有10px的margin。代码中使用了JavaScript来计算每个元素的位置，首先初始化每列的高度为0，然后依次遍历每个元素，找到当前高度最短的列，将元素放在该列下面，更新该列的高度。元素的位置使用CSS的left和top属性来控制。 当然，这只是一个简单的瀑布流实现，实际上还有很多细节需要考虑，比如异步加载图片、滚动加载等等。如果您需要实现一个完整的瀑布流布局，建议使用现成的库或框架，比如Masonry、Isotope等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值