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. 设计模式学习之代理模式（Proxy)

    一.代理模式的初衷 不想让客户端直接访问具体实现接口,客户端不应该直接访问具体实现,一般会涉及到以下四个对象 业务接口:定义客户端访问的接口,是实现类和代理类都需要实现的 实现类:实现了业务接口,真正 ...

  2. Spark SQL概念学习系列之Spark SQL入门（八）

    前言 第1章   为什么Spark SQL? 第2章  Spark SQL运行架构 第3章 Spark SQL组件之解析 第4章 深入了解Spark SQL运行计划 第5章  测试环境之搭建 第6章 ...

  3. Geoserver常见问题总结

    原文地址 :http://blog.csdn.net/mygisforum/article/details/8249093 http://www.cnblogs.com/wang985850293/p ...

  4. 读《实战GUI自动化测试》之：第三步，如何提高测试结果分析的效率

    转自:http://www.ibm.com/developerworks/cn/rational/r-cn-guiautotesting3/ 所谓自动化测试,就是“自动化”+“测试”.自动化本身显然不 ...

  5. RecylerView为item添加点击事件

    RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件. 1 原理: 为Recy ...

  6. Lazarus 日志工具 MultiLog

    MultiLog是一种同时以灵活性和低开销为目标的日志系统.顾名思义,它可用于将日志实例到多个目标,如文本文件.可视控件或其他应用程序.添加新的日志目标使用两个方法就可以实现了,其中一个方法是可选的. ...

  7. jmeter普通的接口测试

    摘自:后知者.https://www.cnblogs.com/houzhizhe/p/6838731.html jmeter可以做接口测试,其中接口测试的简单操作包括做http脚本(发get/post ...

  8. bzoj3940 censoring 题解（AC自动机）

    题目描述 Farmer John has purchased a subscription to Good Hooveskeeping magazine for his cows, so they h ...

  9. java 23种设计模式 链接集锦

    创建型抽象工厂模式 http://www.cnblogs.com/java-my-life/archive/2012/03/28/2418836.html工厂方法 http://www.cnblogs ...

  10. MFC获取各类指针句柄

    最近有些人在问MFC编程一些要点,有一些句柄的获取.指针的获取是常见的问题,本文将对这些问题做以解释,参考了前人的笔录(见reference),希望能够帮助大家更方便地进行MFC程序开发. 一般我们使 ...