利用JavaScript怎么实现一个瀑布流布局-创新互联-古蔺大橙子建站
RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
利用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://scgulin.cn/article/hjjoe.html

其他资讯

快速导航
友情链接
网站建设
联系方式
  • 企业：青羊区大橙子信息咨询工作室
  • 地址：成都市青羊区太升南路288号
  • 电话：18980820575
  • 网址：www.scgulin.cn

公司名称：青羊区大橙子信息咨询工作室 联系电话：18980820575

网站备案号：蜀ICP备2022028542号-27

古蔺大橙子建站 古蔺网站建设 古蔺网站设计 古蔺网站制作 成都做网站