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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
Node.js使用Angular简单示例
May 11 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 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学习笔记之一
2011/01/17 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php常量详细解析
2015/10/27 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python列表与元组详解实例
2013/11/01 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python制作图片缩略图
2019/04/30 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python while循环使用else语句代码实例
2020/02/07 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
自我反省检讨书
2014/01/23 职场文书
个人贷款担保书
2014/04/01 职场文书
一年级学生期末评语
2014/04/21 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书