1.看看效果吧！

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({});

     })

　　

代码简单，容易修改，，拿去用吧。。

个人博客 ：很多好用的 npm 包 ， 可以看看 https://gilea.cn/　

jq超简单的流式布局，代码简单，容易修改的更多相关文章

  1. 自定义View(三)--实现一个简单地流式布局

    Android中的流式布局也就是常说的瀑布流很是常见,不仅在很多项目中都能见到,而且面试中也有很多面试官问道,那么什么是流式布局呢?简单来说就是如果当前行的剩余宽度不足以摆放下一个控件的时候,则自动将 ...

  2. iOS:UICollectionView流式布局及其在该布局上的扩展的线式布局

    UICollectionViewFlowLayout是苹果公司做好的一种单元格布局方式,它约束item的排列规则是:从左到右依次排列,如果右边不够放下,就换一行重复上面的方式排放,,,,,   常用的 ...

  3. Android 自定义View修炼-Android中常见的热门标签的流式布局的实现

    一.概述:在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧(源码下载在下面最后给出哈) 类似的 ...

  4. 自定义ViewGroup 流式布局

    使用 public class MainActivity extends Activity {     @Override     protected void onCreate(Bundle sav ...

  5. Android流式布局实现

    查看我的所有开源项目[开源实验室] 欢迎增加我的QQ群:[201055521],本博客client下载[请点击] 摘要 新项目用到了一种全新布局----Android标签流式布局的功能,正好一直说给大 ...

  6. Android控件进阶-自定义流式布局和热门标签控件

    技术:Android+java   概述 在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何 自定义一个类似热门标签那样的流式布局吧,类 ...

  7. Android自己定义之流式布局

    流式布局,优点就是父类布局能够自己主动的推断子孩子是不是须要换行,什么时候须要换行,能够做到网页版的标签的效果. 今天就是简单的做了自己定义的流式布局. 详细效果: 原理: 事实上非常easy,Mea ...

  8. Android自定义之流式布局

    流式布局,好处就是父类布局可以自动的判断子孩子是不是需要换行,什么时候需要换行,可以做到网页版的标签的效果.今天就是简单的做了自定义的流式布局. 具体效果: 原理: 其实很简单,Measure  La ...

  9. 【Android - 自定义View】之自定义可滚动的流式布局

    首先来介绍一下这个自定义View: (1)这个自定义View的名称叫做 FlowLayout ,继承自ViewGroup类: (2)在这个自定义View中,用户可以放入所有继承自View类的视图,这个 ...

随机推荐

  1. DP Codeforces Round #FF (Div. 1) A. DZY Loves Sequences

    题目传送门 /* DP:先用l,r数组记录前缀后缀上升长度,最大值会在三种情况中产生: 1. a[i-1] + 1 < a[i+1],可以改a[i],那么值为l[i-1] + r[i+1] + ...

  2. ACM_递推题目系列之二认错人（递推dp）

    递推题目系列之二认错人 Time Limit: 2000/1000ms (Java/Others) Problem Description: 国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼 ...

  3. Android 性能优化（17）UI优化：Keeping Your App Responsive 拒绝ANR

    Keeping Your App Responsive In this document What Triggers ANR? How to Avoid ANRs Reinforcing Respon ...

  4. 287 Find the Duplicate Number 寻找重复数

    一个长度为 n + 1 的整形数组,其中的数字都在 1 到 n 之间,包括 1 和 n ,可知至少有一个重复的数字存在.假设只有一个数字重复,找出这个重复的数字.注意:    不能更改数组内容(假设数 ...

  5. js执行顺序——学习笔记

    我们知道有个全局的 window对象,js的一切皆window上的属性和方法.window上有个window.document属性,记录了整个html的dom树,document是顶层. body 和 ...

  6. 关于java的print()

    print方法是类PrintStream的方法成员,而System类有一个static的PrintStream类型的属性成员,名叫out,我们平时写的System.out.print("he ...

  7. golang 并发锁的陷阱

    错误代码示例 package main import ( "sync" "strconv" "fmt" ) type Node struct ...

  8. Farseer.net轻量级开源框架 入门篇：使用前说明

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 框架性能测试 下一篇:Farseer.net轻量级开源框架 入门篇: 增.删.改. ...

  9. 运用反射时报错java.lang.NoSuchMethodException，以解决，记录一下

    问题:想调用service类中的私有方法时, Method target=clz.getMethod("say", String.class);用Class的getMethod报错 ...

  10. Introduction of Version Control/Git, SVN

    什么是版本控制? 你可以把一个版本控制系统(缩写VCS)理解为一个“数据库”,在需要的时候,它可以帮你完整地保存一个项目的快照.当你需要查看一个之前的快照(称之为“版本”)时,版本控制系统可以显示出当 ...