您好,欢迎光临本网站![请登录][注册会员]  
文件名称: 3种方式实现瀑布流布局小结
  所属分类: 其它
  开发工具:
  文件大小: 219kb
  下载次数: 0
  上传时间: 2020-12-13
  提 供 者: weixin_********
 详细说明:前言 今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。 一、JS 实现瀑布流 思路分析 瀑布流布局的特点是等宽不等高。 为了让最后一行的差距最小,从第二行开始,需要将图片放在第一行最矮的图片下面,以此类推。 父元素设置为相对定位,图片所在元素设置为绝对定位。然后通过设置 top 值和 left 值定位每个元素。 代码实现