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实现Java中StringBuffer的方法
Feb 09 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
php简单中奖算法(实例)
2017/08/15 PHP
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python创建系统目录的方法
2015/03/11 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python调用c++传递数组的实例
2019/02/13 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
python查看数据类型的方法
2019/10/12 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python利用opencv保存、播放视频
2020/11/02 Python
python中doctest库实例用法
2020/12/31 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
大学生就业策划书范文
2014/04/04 职场文书
《老山界》教学反思
2014/04/08 职场文书
员工团队活动方案
2014/08/28 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
协议书格式模板
2016/03/24 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏