虽然可以直接使用css实现瀑布流布局，但显示的方式有点问题，所以这儿就直接使用jquery+css来实现瀑布流布局，最终效果如下：

    

思路是通过将每个小块的position设置为relative，然后计算出在当前选择的列下应该上移的距离，然后设置div的top属性为该距离的负值，然后就达到了瀑布流的效果，代码如下：

 <!DOCTYPE>

 <html>

 <head>

     <title>vue demo</title>

     <script src="js/jquery-3.2.1.js"></script>

     <style>

         body{

             padding:0px;

             margin:0px;

         }

         .lv-masonry{

             font-size:0px;

         }

         .lv-masonry-2 .lv-masonry-item{

             width:calc(50% - 2px - 10px);

         }

         .lv-masonry-3 .lv-masonry-item{

             width:calc(33.33% - 2px - 10px);

         }

         .lv-masonry-4 .lv-masonry-item{

             width:calc(25% - 2px - 10px);

         }

         .lv-masonry-5 .lv-masonry-item{

             width:calc(20% - 2px - 10px);

         }

         .lv-masonry-item{

             font-size:20px;

             border:1px solid red;

             display:inline-block;

             margin:5px;

             position:relative;

         }

     </style>

     <script>

         function Masonry(el){

             this.el = el;

             this.$el = $(el);

             this.size = 0;

         }

         Masonry.prototype = {

             constructor:Masonry,

             init: function(){

                 this.size = this.$el.find('.lv-masonry-item').length;

                 var heights = [{}];

                 for(var i=1; i<=this.size; i++){

                     var e = {};

                     var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')

                     e.height = $e.height();

                     e.top = $e.offset().top;

                     heights.push(e);

                 }

                 var index = this.$el.attr("class").indexOf("lv-masonry-");

                 if(index > -1){

                     var clazz = this.$el.attr("class").substr(index);

                     index = clazz.indexOf(" ");

                     if(index > -1){

                         clazz = clazz.substr(0, index);

                     }

                     clazz = clazz.substr(clazz.lastIndexOf("-") + 1);

                     var start = parseInt(clazz);

                     if(!isNaN(start)){

                         var minpos = 1;

                         var mintop = heights[1].top;

                         for(var i=2; i<=start; i++){

                             if(mintop > heights[i].top){

                                 minpos = i;

                                 mintop = heights[i].top;

                             }

                         }

                         for(var i=1; i<=start; i++){

                             if(minpos != i){

                                 var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');

                                 $e.css("top", -1 * (heights[i].top - mintop) + "px");

                             }

                         }

                         heights = [{}];

                         for(var i=1; i<=this.size; i++){

                             var e = {};

                             var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')

                             e.height = $e.height();

                             e.top = $e.offset().top;

                             heights.push(e);

                         }

                         for(var i=start+1; i<=this.size; i++){

                             var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');

                             var delta = 0;

                             var temp = i;

                             do{

                                 delta += heights[temp-start].height + 10;

                                 temp -= start;

                             }while(temp > start);

                             delta = heights[i].top - heights[temp].top - delta;

                             $e.css("top", -1 * delta + "px");

                         };

                     }

                 }

             }

         }

         $(function(){

             var masonry = new Masonry('#masonry');

             masonry.init();

         });

     </script>

 </head>

 <body>

     <div class="lv-masonry lv-masonry-4" id="masonry">

         <div class="lv-masonry-item" style="height:50px;">

         1

         </div>

         <div class="lv-masonry-item" style="height:100px;">

         2

         </div>

         <div class="lv-masonry-item" style="height:150px;">

         3

         </div>

         <div class="lv-masonry-item" style="height:150px;">

         4

         </div>

         <div class="lv-masonry-item" style="height:50px;">

         5

         </div>

         <div class="lv-masonry-item" style="height:100px;">

         6

         </div>

         <div class="lv-masonry-item" style="height:100px;">

         7

         </div>

         <div class="lv-masonry-item" style="height:50px;">

         8

         </div>

         <div class="lv-masonry-item" style="height:50px;">

         9

         </div>

         <div class="lv-masonry-item" style="height:50px;">

         10

         </div>

     </div>

 </body>

 </html>

masonry.html

代码中仅实现了两列、三列、四列和五列的布局，如果要增加其他的就添加类似如下的css代码即可：

在使用的时候要指定列，示例如下：

然后在jquery的loag方法中添加

var masonry = new Masonry('#masonry');
masonry.init();

便可使用瀑布流布局。

使用jquery+css实现瀑布流布局的更多相关文章

  1. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  2. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  3. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  5. 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局

    传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...

  6. 纯CSS实现瀑布流布局

    https://www.w3cplus.com/css/pure-css-create-masonry-layout.html

  7. AJAX+json+jquery实现预加载瀑布流布局

    宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...

  8. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  9. jQuery Wookmark 瀑布流布局

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

随机推荐

  1. 【协议逆向工程】Part 1 概述

    1 协议逆向工程概述 1.1 协议 协议是计算机网络与分布式系统中各种通信实体键相互交互信息时必须遵守的一组规则和约定,这些规则明确规定了所交换的数据格式以及有段的同步问题,从而保证了双方通信有条不紊 ...

  2. .net core IIS/Kestrel上传大文件的解决方法

    大文件,就是内容的大小超过了一定数量的文件,比如1个GB的文件. 站点一般会限制上传文件的大小,如果超过了一定限制,则会报错误. 在处理大文件上传的方式上,IIS代理和Kestrel宿主服务器的处理方 ...

  3. E: Sub-process /usr/bin/dpkg returned an error code (1)错误解决

    在用apt-get安装软件时出现了类似于install-info: No dir file specified; try --help for more information.dpkg:处理 get ...

  4. [ZJOI2007]最大半联通子图

    这个题,翻译一下题面,就是一个连通图,找他的最长链的数量... 所以说方法就比较明显了:tarjan缩点+拓扑+DP 注意也是本题唯一坑点,拓扑DP的时候要考虑重复边的情况... 呆码: #inclu ...

  5. 解决ios兼容性问题

    其实也不算兼容性问题 在做一个手指切换动画时,在安卓显示正常但是在iOS上切换图片时整个页面会向上或向下窜,这样非常印象美观,这种现象是由于ios自带的下拉刷新功能能影响的: 解决方法: 添加阻止事件 ...

  6. 20165326 java实验四

    20165326实验四-Android程序设计 一:Android Stuidio的安装测试 1.安装Android Stuidio 具体跟着教程走就行主要是配置的时候要选择下载SDK或手动配置,详细 ...

  7. Redis学习第六课：Redis ZSet类型及操作

    Sorted set是set的一个升级版本,它在set的基础上增加了一个顺序属性,这一属性在添加修改元素时候可以指定,每次指定后,zset会自动重新按新的值调整顺序.可以理解为有两列字段的数据表,一列 ...

  8. 牛客网PAT乙级(Basic Level)真题-数素数 (20)

    题目描述 令Pi表示第i个素数.现任给两个正整数M <= N <= 10000,请输出PM到PN的所有素数. 输入描述: 输入在一行中给出M和N,其间以空格分隔. 输出描述: 输出从PM到 ...

  9. 全栈爬取-Scrapy框架(CrawlSpider)

    引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...

  10. 集群相关、用keepalived配置高可用集群

    1.集群相关 2.keepalived相关 3.用keepalived配置高可用集群 安装:yum install keepalived -y   高可用,主要是针对于服务器硬件或服务器上的应用服务而 ...