JavaScript实现瀑布流布局的代码分享

更新时间：2023年04月12日 10:47:14 作者：深藏blue9

不知道大家在线上购物的时候有没有发现到，自己逛起来根本就停不下来，越往下翻越是觉得就会出现需要的东西，这就是很多电商公司都在使用的瀑布流布局。本文就来用JS实现这一布局，需要的可以参考一下

前言

不知道大家在线上购物的时候有没有发现到，自己逛起来根本就停不下来，越往下翻越是觉得就会出现需要的东西。这就是很多电商公司都在使用的瀑布流布局，为了更好的留住用户，给你的感觉就是下面会有更精彩的东西，让你不停地往下滑，一步步走进消费“陷阱”。如何实现瀑布流布局，这也是阿里面试的经典考题。

如何实现

思路：将内容宽度一致，高度不一致的图片，从左至右排列，一行内容排满后，下一张就会按顺序排在最短的内容后，以此类推。

html部分

在页面放入20个box容器（几张图片就放几个容器），为方便给图片添加好看的样式，我在box容器里放了个box-img容器，再将图片放入。

<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img1/1 (1).JPG" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img1/1 (2).JPG" alt="">
            </div>
        </div>
/*此处省多个box 几张图片就放几个box容器*/
</body>

css部分

        * {
            margin: 0;
            padding: 0;
        }
        /*让图片向左浮动*/
        .box {
            float: left;
        }
        /*定位*/
        .container {
            position: relative;
        }
        /*给图片容器设置相同的宽度 边框 盒子阴影*/
        .box-img {
            width: 150px;
            padding: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
        }
         /*让图片与图片容器宽度相等*/
        .box-img img {
            width: 100%;
        }

js部分

我们的目的其实就是要摆放图片的位置，先获取到所有的图片，当第一排向左浮动摆放好后，我们需要找到在第二排开始从谁是被需要摆放位置的。那就用屏幕视窗的宽度除以一个图片盒子的宽度，向下取整，那就知道第一行能放几张图，然后我们操作第num张之后的每一张图，把它们一一摆放到最矮那一列的位置。

window.onload = function() {    
    imgLocation('container', 'box')
  }
  
//获取到所有要摆放的图片
 function imgLocation(parent,content){
    var cparent = document.getElementById(parent)
    // cparent 下的所有的第一层的子容器 box
    var ccontent = getChildElement(cparent,content)  //[装了20个div]

    //找从谁开始是需要被摆放位置的
    var winWidth = document.documentElement.clientWidth //获取视窗的宽度
    var imgWidth = ccontent[0].offsetWidth              //获取图片盒子的宽度
    var num = Math.floor(winWidth / imgWidth)           //向下取整

    // 操作第 num+1 张图
    var BoxHeightArr = []
    for (var i = 0; i < ccontent.length; i++){
        // 前num张只要计算高度
        if (i < num) {
            BoxHeightArr[i] = ccontent[i].offsetHeight 
        }else{
            //我们要操作的Box
            var minHeight = Math.min.apply(null,BoxHeightArr)
            var minIndex = BoxHeightArr.indexOf(minHeight)

            ccontent[i].style.position = 'absolute'
            ccontent[i].style.top = minHeight + 'px'
            ccontent[i].style.left = (imgWidth * minIndex) + 'px'

            //更新最矮的那一列的高度
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight          
        }
    }
 }

在外面创建一个辅助函数，可以帮我们取到父容器中的某一层子容器

function getChildElement(parent,content){
   var contentArr = []
   var allContent = parent.getElementsByTagName('*') //[xxxx数组]
   //遍历allContent 把中其类名为 content 的容器都存到contentArr数组中
   for (var i = 0; i < allContent.length; i++){
       //当前这个容器的类名是否为 content
       if (allContent[i].className == content){
           contentArr.push(allContent[i])
       } 
   }
   return contentArr
}

实现效果图如下：

瀑布流布局的优点

良好的视觉体验；参差不齐的排列方式，以及流动布局的扩展性，打破常规网站布局排版，用户在浏览内容时会有新鲜感，带来良好的视觉体验。

吸引用户；可以通过界面展示给用户多条数据，并且让用户有可以向下浏览的冲动。

适应移动端；移动设备都偏小，屏幕能显示的内容不会很多，如果经常翻页的话显得疲劳，使用瀑布流布局用户只需要不停滚动就能不断地进行浏览。

到此这篇关于JavaScript实现瀑布流布局的代码分享的文章就介绍到这了,更多相关JavaScript瀑布流布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序js文件改变参数并在视图上及时更新【推荐】
这篇文章主要介绍了微信小程序js文件改变参数并在视图上及时更新的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2018-06-06
使用JavaScript平移和缩放图像的示例代码
平移和缩放是查看图像时常用的功能,我们可以放大图像以查看更多细节,进行图像编辑,Dynamsoft Document Viewer是一个用于此目的的SDK,它为文档图像提供了一组查看器,在本文中,我们将演示如何使用它来平移和缩放图像,需要的朋友可以参考下
2024-08-08
JavaScript canvas绘制圆弧与圆形
这篇文章主要为大家详细介绍了JavaScript canvas绘制圆弧与圆形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
javascript 随机数与高级应用附vbscript(asp) 随机数总结
有时忘了程序的随机数函数或javascript和vbscript的随机数混乱了，特总结下两者的随机数函数，以备以后使用方便。
2007-10-10
javascript框架设计读书笔记之种子模块
本文是司徒正美的《javascript框架设计》一书第一章种子模块的读书笔记，记录了一下自认为比较重要的东西，分享给大家
2014-12-12
js+canvas实现动态吃豆人效果
本文主要介绍了js+canvas实现动态吃豆人效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
轻松搞定js表单验证
不用一行代码和一句提示语就搞定整个表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
一文带你理解微信小程序中RPC通信的实现
在微信小程序开发中，要实现两个线程之间的通信是一项重要的任务，所以本文就来讲讲如何使用小程序的 postMessage 和 addListener API 来实现在两个线程之间进行高效的 RPC 通信吧
2023-06-06
JavaScript读写二进制数据的方法详解
avascript里有两个内置对象，一个是ArrayBuffer；一个是DataView，读写二进制数据都需要使用这两个对象。这篇文章主要给大家介绍了关于JavaScript读写二进制数据的方法，需要的朋友可以参考下
2018-09-09
js获取数组的最后一个元素
这篇文章主要介绍了javascript获取数组的最后一个元素,需要的朋友可以参考下
2015-04-04