js瀑布流布局的实现


Posted in Javascript onJune 28, 2020

本文实例为大家分享了js实现瀑布流布局的具体代码,供大家参考,具体内容如下

原理:

1、瀑布流布局,要求进行布局的元素等宽,然后计算元素的宽与浏览器的宽度之比,得到需要布置的列数。
2、创建一个数组,长度为列数,数组元素为每一列已布置元素的总高度。(一开始为0)。
3、将未布置的元素,依次布置到高度最小的那一列,然后更新这一列的高度,就得到了瀑布流布局

js瀑布流布局的实现

实现

布局

<body>
 <div id="content">
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <div id="box">
  <img src="" >
  </div>
  <!-- 很多很多图片 -->
 </div>
</body>

js:

$(function(){
 waterFall();
})
function waterFall(){
 //计算出每个图片盒子的宽度
 var box = $('#box');
 var boxWidth = box.outerWidth();
 //计算出屏幕的宽度
 var screenWidth = $(window).width();
 //计算出有多少列
 var cols = parseInt(screenWidth / boxWidth);
 //定义一行图片盒子的高度数组,找出数组中最少的值
 var heigthArr =[];
 //所有图片循环
 $.each(box,function(item,index){
 var boxHeigth = box.outerHeigth();
 //判断是否第一排
 if(index < cols){
  //如果是第一排,取高度,追加到数组中
  heigthArr[index] = boxHeigth;
 }else{
  //最小图片高度
  var minBoxHeigth = Math.min.apply(null,heigthArr);
  //最小图片的索引
  var minBoxIndex = $.inArray(minBoxHeigth,heigthArr);
  $(item).css({
  position:'absolute',
  left:minBoxIndex * boxWidth + 'px',
  top:minBoxHeigth + 'px'
  });
  heigthArr[minBoxIndex]+=boxHeigth;//更新高度
 }
 })
}

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

Javascript 相关文章推荐
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
js读取配置文件自写
Feb 11 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 #Javascript
vue实现登录拦截
Jun 29 #Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 #Javascript
JavaScript多种图形实现代码实例
Jun 28 #Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 #Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
You might like
调频问题解答
2021/03/01 无线电
PHP 金额数字转换成英文
2010/05/06 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
很好用的js日历算法详细代码
2013/03/07 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
Vue基础配置讲解
2019/11/29 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python实现rsa加密实例详解
2017/07/19 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
竞选班干部演讲稿
2014/04/24 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
Golang: 内建容器的用法
2021/05/05 Golang
Python中的 Set 与 dict
2022/03/13 Python