jquery实现超简单的瀑布流布局【推荐】


Posted in Javascript onMarch 08, 2017

1.看看效果吧!

jquery实现超简单的瀑布流布局【推荐】

2.html代码index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 ul{position: relative;padding: 0 -3px;list-style: none;width: 600px;margin: 0 auto}
 li{width: 33.33%;position: absolute;box-sizing: border-box;display: block; }
 img{width: 100%;height: auto;display: block;}
 </style>
 <script src="./jquery-1.12.4.min.js"></script>
</head>
<body style="background: #000">
 <ul class="flowLayout-box">
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u17.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u19.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u114.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u116.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u118.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u120.png" alt=""></li>
 <li class="flowLayout-item"> <img class="flowLayout-pic" src="./img/u132.png" alt=""></li>
 </ul>
</body>
</html>

3.插件代码

(function ($) {
 $.fn.flowLayout = function(options) {
 var dft = {
 gapWidth:16, //间隙
 gapHeight:16, //间歇
 column:3 //列
 };
 var ops = $.extend(dft,options);
 var _this = $(this);
 _this.width((_this.parents('.flowLayout-box').width()-2*ops.gapWidth)/3)
 var _pWidth=_this.parents('.flowLayout-box').width();
 $(".flowLayout-box").css({
 'opacity':0
 });
 var columnHeight=[],columnIndex=0;
 for (var i=0 ;i<ops.column;i++){
 columnHeight.push(0);
 }
 setTimeout(function () {
 for(var j =0 ; j< _this.length ;j++){
 console.log(columnHeight[columnIndex]);
 $(_this).eq(j).css({
 'top':columnHeight[columnIndex]+ops.gapHeight+'px',
 'left':_pWidth*columnIndex/3+'px'
 })
 columnHeight[columnIndex]+=$(_this).eq(j).height()+ops.gapHeight
 columnIndex=getIndex();
 }
 },50)
 function getIndex() {
 var columnIndex=0,maxHeight=0;
 for(var i =0 ;i < columnHeight.length ;i++){
 if(columnHeight[i]<columnHeight[columnIndex]){
 columnIndex=i;
 }
 if(columnHeight[i]>maxHeight){
 maxHeight=columnHeight[i]
 }
 }
 $(".flowLayout-box").css({
 'opacity':1,
 'height':maxHeight
 });
 return columnIndex;
 }
 }
 })(jQuery); 

4.调用代码

$(function () {
 $('.flowLayout-box li').flowLayout({});
 })

代码简单,容易修改,,拿去用吧。。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
angular select 默认值设置方法
Jun 23 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
小程序实现发表评论功能
Jul 06 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
node实现简单的增删改查接口实例代码
Aug 22 Javascript
electron 安装,调试,打包的具体使用
Nov 06 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 #Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 #Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
jquery仿ps颜色拾取功能
Mar 08 #Javascript
关于Javascript中document.cookie的使用
Mar 08 #Javascript
JavaScript中transform实现数字翻页效果
Mar 08 #Javascript
You might like
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
javaScript封装的各种写法
2017/08/14 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
python数据结构之二叉树的建立实例
2014/04/29 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
Python文件和流(实例讲解)
2017/09/12 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
个人自荐信
2013/12/05 职场文书
八年级美术教学反思
2014/02/02 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015年司法局工作总结
2015/05/22 职场文书
社区服务理念口号
2015/12/25 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
如何使用python包中的sched事件调度器
2022/04/30 Python