JavaScript实现瀑布流布局的3种方式


Posted in Javascript onDecember 27, 2020

前言

今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才知道原来这是一种瀑布流布局,感觉挺有意思,于是决定研究一下,在网上也找了一些方案,实现瀑布流大概有3种方式。

一、JS 实现瀑布流

思路分析

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

代码实现

<!DOCTYPE html>
<html>
<head>
 <style>
 .box {
  width: 100%;
  position:relative;
 }
 .item {
  position: absolute;
 }
 .item img{
  width: 100%;
  height:100%;
 }
 </style>
</head>
<body>
<div class="box">
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
 function waterFall() {
 // 1 确定图片的宽度 - 滚动条宽度
 var pageWidth = getClient().width-8;
 var columns = 3; //3列
 var itemWidth = parseInt(pageWidth/columns); //得到item的宽度
 $(".item").width(itemWidth); //设置到item的宽度
 var arr = [];
 $(".box .item").each(function(i){
  var height = $(this).find("img").height();
  if (i < columns) {
  // 2 第一行按序布局
  $(this).css({
   top:0,
   left:(itemWidth) * i+20*i,
  });
  //将行高push到数组
  arr.push(height);
  } else {
  // 其他行
  // 3 找到数组中最小高度 和 它的索引
  var minHeight = arr[0];
  var index = 0;
  for (var j = 0; j < arr.length; j++) {
   if (minHeight > arr[j]) {
   minHeight = arr[j];
   index = j;
   }
  }
  // 4 设置下一行的第一个盒子位置
  // top值就是最小列的高度
  $(this).css({
   top:arr[index]+30,//设置30的距离
   left:$(".box .item").eq(index).css("left")
  });

  // 5 修改最小列的高度
  // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
  arr[index] = arr[index] + height+30;//设置30的距离
  }
 });
 }
 //clientWidth 处理兼容性
 function getClient() {
 return {
  width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
  height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 }
 }
 // 页面尺寸改变时实时触发
 window.onresize = function() {
 //重新定义瀑布流
 waterFall();
 };
 //初始化
 window.onload = function(){
 //实现瀑布流
 waterFall();
 }
</script>
</html>

效果如下

JavaScript实现瀑布流布局的3种方式

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

思路分析:

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

代码实现:

<!DOCTYPE html>
<html>
<head>
 <style>
 .box {
  margin: 10px;
  column-count: 3;
  column-gap: 10px;
 }
 .item {
  margin-bottom: 10px;
 }
 .item img{
  width: 100%;
  height:100%;
 }
 </style>
</head>
<body>
<div class="box">
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
</div>
</body>

效果如下:

JavaScript实现瀑布流布局的3种方式

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

思路分析:

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

代码实现:

<!DOCTYPE html>
<html>
<head>
 <style>
 .box {
  display: flex; 
  flex-flow:column wrap;
  height: 100vh;
 }
 .item {
  margin: 10px;
  width: calc(100%/3 - 20px);
 }
 .item img{
  width: 100%;
  height:100%;
 }
 </style>
</head>
<body>
<div class="box">
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="show.jpg" alt="" />
 </div>
 <div class="item">
 <img src="cloth.jpg" alt="" />
 </div>
 <div class="item">
 <img src="banner.jpg" alt="" />
 </div>
</div>
</body>

效果如下:

JavaScript实现瀑布流布局的3种方式

四、3种方式对比

如果只是简单的页面展示,可以使用 column 多栏布局和 flex 弹性布局。如果需要动态添加数据,或者动态设置列数,就需要使用到 JS + jQuery。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
Aug 24 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
Vue实现省市区三级联动
Dec 27 #Vue.js
JavaScript实现通讯录功能
Dec 27 #Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 #Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 #Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
You might like
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
用js实现计算加载页面所用的时间
2010/04/02 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
javascript基本类型详解
2014/11/28 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
详解动画插件wow.js的使用方法
2017/09/13 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详细介绍Python中的偏函数
2015/04/27 Python
python实现自动重启本程序的方法
2015/07/09 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python pygame实现球球大作战
2019/11/25 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
个人公司授权委托书范本
2014/10/12 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书
ant design charts 获取后端接口数据展示
2022/05/25 Javascript