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 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
yii中widget的用法
2014/12/03 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
js控制浏览器全屏示例代码
2014/02/20 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
js实现查询商品案例
2020/07/22 Javascript
Python完全新手教程
2007/02/08 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
python urllib和urllib3知识点总结
2021/02/08 Python
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
土木工程应届生求职信
2013/10/31 职场文书
求职推荐信范文
2013/12/01 职场文书
顶碗少年教学反思
2014/02/21 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
创先争优演讲稿
2014/09/15 职场文书
四风问题对照检查材料
2014/09/22 职场文书
植物园观后感
2015/06/11 职场文书
2016党校学习心得体会
2016/01/07 职场文书