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 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
javascript 控制弹出窗口
Apr 10 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
精通php的十大要点(上)
2009/02/04 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
隐性调用php程序的方法
2015/06/13 PHP
实例解析php的数据类型
2018/10/24 PHP
date.parse在IE和FF中的区别
2010/07/29 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
python中函数默认值使用注意点详解
2016/06/01 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
django使用html模板减少代码代码解析
2017/12/12 Python
python保存文件方法小结
2018/07/27 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
python3实现猜数字游戏
2020/12/07 Python
python和js交互调用的方法
2020/06/23 Python
利用Python优雅的登录校园网
2020/10/21 Python
农民致富事迹材料
2014/01/23 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
上下班时间调整通知
2015/04/23 职场文书