瀑布流布局的思路,什么是瀑布流布局
前言
今天逛闲鱼的时候观察到每一行的高度不是相同的，经了解才知道原来这是一种瀑布流布局，感觉挺有意思，于是决定研究一下，在网上也找了一些方案，实现瀑布流大概有3种方式。
一、JS 实现瀑布流
思路分析
瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。父元素设置为相对定位，图片所在元素设置为绝对定位。然后通过设置顶端值和左边的值定位每个元素。代码实现
！DOCTYPE htmlhtmlhead样式。框{宽度：100%;位置：相对；} .项{位置：绝对；} .项目img{宽度：100%;身高：100%;}/style/head by div class= box div class= item img src= banner。jpg alt= //div div class= item img src= show。jpg alt= //div class= item img src= cloth。jpg alt= //div class= item img src= banner。jpg alt= //div div class= item img div class= item img src= show。jpg alt= //div class=确定图片的宽度-滚动条宽度var pageWidth=getClient().宽度-8;定义变量列=3;//3列var item width=parse int(页宽/列)；//得到项目的宽度$(.项)。宽度(项目宽度)；//设置到项目的宽度var arr=[]；$(.盒子。项)。每个（函数{ var height=$(this).查找( img ).height()；如果(我列){ //2第一行按序布局$(这个)。css({ top:0，left:(itemWidth) * i 20*i，})；//将行高推到数组数组推送(高度);} else { //其他行//3 找到数组中最小高度和它的索引var min height=arr[0]；定义变量指数=0;for(var j=0；j排列长度；j){ if(min height arr[j]){ min height=arr[j]；index=j；} } //4 设置下一行的第一个盒子位置//顶部值就是最小列的高度$(这个)。css({ top:arr[index] 30，//设置30的距离左：$(。盒子。项)。情商(指数)。CSS( left )})；//5 修改最小列的高度//最小列的高度=当前自己的高度拼接过来的高度arr[index]=arr[index]height 30；//设置30的距离} });}//客户端宽度处理兼容性函数getClient(){ return { width:window。内部宽度 文档。文档元素。客户端宽度 文档。身体。客户端宽度、高度：窗口。内部高度 文档。文档元素。客户高度 文档。身体。客户端高度} }//页面尺寸改变时实时触发window.onresize=function() { //重新定义瀑布流瀑布();};//初始化window.onload=function(){ //实现瀑布流瀑布();}/script/html效果如下
二、column 多行布局实现瀑布流
思路分析：
圆柱实现瀑布流主要依赖两个属性。
一个是列计数属性，是分为多少列。
一个是列间隙属性，是设置列与列之间的距离。
代码实现：
！DOCTYPE htmlhtmlhead样式. box { margin:10px；列数：3;列间距：10px}。item { margin-bottom:10px；} .项目img{宽度：100%;身高：100%;}/style/head by div class= box div class= item img src= banner。jpg alt= //div div class= item img src= show。jpg alt= //div class= item img src= cloth。jpg alt= //div class= item img src= banner。jpg alt= //div div class= item img div class= item img src= show。jpg alt= //div class=
效果如下：
三、flex 弹性布局实现瀑布流
弯曲实现瀑布流需要将最外层元素设置为显示器：flex，即横向排列。然后通过设置伸缩流：列换行使其换行。设置高度：100vh填充屏幕的高度，来容纳子元素。每一列的宽度可用计算函数来设置，即宽度：计算(100%/3 - 20px)。分成等宽的3列减掉左右两遍的边缘距离。
思路分析：
！DOCTYPE htmlhtmlhead样式box { display:flex；灵活流动：列换行；身高：100vh}。item { margin:10px；宽度：calc(100%/3-20px)；} .项目img{宽度：100%;身高：100%;}/style/head by div class= box div class= item img src= banner。jpg alt= //div div class= item img src= show。jpg alt= //div class= item img src= cloth。jpg alt= //div class= item img src= banner。jpg alt= //div div class= item img div class= item img src= show。jpg alt= //div class=
代码实现：
如果只是简单的页面展示，可以使用圆柱多栏布局和弯曲弹性布局。如果需要动态添加数据，或者动态设置列数，就需要使用到JS jQuery。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。