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 相关文章推荐
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
webpack之devtool详解
Feb 10 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue.js中npm安装教程图解
Apr 10 Javascript
Vue核心概念Getter的使用方法
Jan 18 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
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
教育科研先进个人材料
2014/01/26 职场文书
八年级美术教学反思
2014/02/02 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
师德师风建设方案
2014/05/08 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
经理任命书模板
2014/06/06 职场文书
幼儿园运动会口号
2014/06/07 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
计划生育诚信协议书
2014/11/02 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers