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 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
AngularJS快速入门
Apr 02 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
用js实现in_array的方法
2013/11/05 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
2019/08/27 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
python基础教程之缩进介绍
2014/08/29 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python实现图片筛选程序
2018/10/24 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python实现结构体代码实例
2020/02/10 Python
PyTorch-GPU加速实例
2020/06/23 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
是否有自动比较结构的方法
2015/06/03 面试题
质量工程师岗位职责
2013/11/16 职场文书
2014领导班子四风问题对照检查材料思想汇报
2014/09/21 职场文书
仰望星空观后感
2015/06/10 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书