js 实现瀑布流

前端&&&辞耳

已于 2023-01-13 17:43:54 修改

阅读量227

点赞数

文章标签： javascript 前端 css3

于 2023-01-13 16:54:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_56042698/article/details/128676514

版权

文章探讨了使用CSS的column-count属性和JavaScript实现瀑布流布局的局限性，并提供了JavaScript实现瀑布流的具体代码示例，包括计算元素宽度、设置容器宽度以及动态定位元素等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于css实现瀑布流的两种方法都有一定的局限性，不能满足需求。

css 方法最简单的是给父元素添加 column-count: xx 属性 xx 代表需要展示的列数。缺点是从后端拿到的数据会以先竖向排列再横向排列。

js方法

.content_main {    //这个父元素
    position: relative;
}


.module {  //需要排列的元素
    height: auto;
    position: absolute;
}

let container = document.getElementById("content_main_id")

根据id 拿到父元素

let item = document.getElementsByClassName("module")

根据class 拿到子元素也就是需要需要排列的元素

                waterFall:function(){
                    // 1. 设置container盒子的宽度
                    //   注意：浏览器的可视区域的宽度 / 一个item元素的宽度 = 一行的排列的元素的个数
                    let container = document.getElementById("content_main_id")
                    let item = document.getElementsByClassName("module")
                    //获取元素的宽度(含border，padding)
                    let width = item[0].offsetWidth 
                    //计算出浏览器窗口的宽度
                    let clientWidth = document.documentElement.clientWidth;
                    //计算出应该放几列（向下取整）
                    let columnCount = Math.floor(clientWidth / width)
                    //设置容器（父盒子）的宽度
                    // container.style.width = columnCount*width+"px"

                    // 2.设置每一个item元素的排列位置
                    //  第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
                    let hrr = []
                    for(let i= 0 ;i<item.length;i++){
                            //定位第一行的图片
                        if(i<4){   //需要展示几列
                            item[i].style.top = "0px"
                            if(i == 0){  //处理item的间隔
                                item[i].style.left = i* width+"px" 
                            }else{
                                item[i].style.left = (i* width+i*20)+"px" 
                            }
                            
                            hrr.push(item[i].offsetHeight)
                        }else{
                            //第一行之后的
                            //选择总高度最小的列
                            let min = Math.min(...hrr)
                            let index = hrr.indexOf(min)
                            //将每个元素定位到当前总高度最小的列下
                            min = min + parseInt(i/4)*20   //处理top值
                            
                            item[i].style.top = min+"px"
                            item[i].style.left = (index * width+ index*20)+"px" 
                            //当前定位的元素加入该列
                            hrr[index] += item[i].offsetHeight
                        }
                    }
                },