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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
JS数组reduce()方法原理及使用技巧解析
Jul 14 Javascript
原生JS实现九宫格抽奖
Sep 13 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
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php封装的验证码类分享
2017/02/26 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
Python实现数据库编程方法详解
2015/06/09 Python
python 以16进制打印输出的方法
2018/07/09 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
毕业设计说明书
2014/05/07 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
文员岗位职责
2015/02/04 职场文书
2015年酒店工作总结
2015/04/28 职场文书
开场白怎么写
2015/06/01 职场文书
公司周年庆寄语
2019/06/21 职场文书