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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 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
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP比你想象的好得多
2014/11/27 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
img的onload的另类用法
2008/01/10 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python字符转换
2008/09/06 Python
Python 装饰器使用详解
2017/07/29 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
python实现网页录音效果
2020/10/26 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
C#笔试题集合
2013/06/21 面试题
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
六年级作文之关于梦
2019/10/22 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js