利用JavaScript怎么实现一个瀑布流布局-创新互联

利用JavaScript怎么实现一个瀑布流布局?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联于2013年创立,先为韶关等服务建站,韶关等地企业,进行企业商务咨询服务。为韶关企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

一、JS 实现瀑布流


思路分析

1、瀑布流布局的特点是等宽不等高。
2、为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推。
3、父元素设置为相对定位,图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。


代码实现




 



 
  
 
      
      
      
                                                       

效果如下

利用JavaScript怎么实现一个瀑布流布局

二、column 多行布局实现瀑布流

思路分析:

column 实现瀑布流主要依赖两个属性。
一个是 column-count 属性,是分为多少列。
一个是 column-gap 属性,是设置列与列之间的距离。

代码实现:




 



 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 

效果如下:

利用JavaScript怎么实现一个瀑布流布局

三、flex 弹性布局实现瀑布流

思路分析:

flex 实现瀑布流需要将最外层元素设置为 display: flex,即横向排列。然后通过设置 flex-flow:column wrap 使其换行。设置 height: 100vh 填充屏幕的高度,来容纳子元素。每一列的宽度可用 calc 函数来设置,即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。

代码实现:




 



 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联网站建设公司,的支持。


网站栏目:利用JavaScript怎么实现一个瀑布流布局-创新互联
当前地址:http://scyanting.com/article/hjjoe.html