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 表单取值常用代码
Dec 22 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php对数组排序的简单实例
2013/12/25 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
vue.js表格分页示例
2016/10/18 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python算法学习之计数排序实例
2013/12/18 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
想学python 这5本书籍你必看!
2018/12/11 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
白酒市场开发计划书
2014/01/09 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
企业宣传方案
2014/03/04 职场文书
爱心捐款倡议书
2014/04/14 职场文书
实习介绍信范文
2015/05/05 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
pytorch实现ResNet结构的实例代码
2021/05/17 Python