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

    

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

  1.  <!DOCTYPE>
  2.  <html>
  3.  <head>
  4.      <title>vue demo</title>
  5.      <script src="js/jquery-3.2.1.js"></script>
  6.      <style>
  7.          body{
  8.              padding:0px;
  9.              margin:0px;
  10.          }
  11.  
  12.          .lv-masonry{
  13.              font-size:0px;
  14.          }
  15.  
  16.          .lv-masonry-2 .lv-masonry-item{
  17.              width:calc(50% - 2px - 10px);
  18.          }
  19.  
  20.          .lv-masonry-3 .lv-masonry-item{
  21.              width:calc(33.33% - 2px - 10px);
  22.          }
  23.  
  24.          .lv-masonry-4 .lv-masonry-item{
  25.              width:calc(25% - 2px - 10px);
  26.          }
  27.  
  28.          .lv-masonry-5 .lv-masonry-item{
  29.              width:calc(20% - 2px - 10px);
  30.          }
  31.  
  32.          .lv-masonry-item{
  33.              font-size:20px;
  34.              border:1px solid red;
  35.              display:inline-block;
  36.              margin:5px;
  37.              position:relative;
  38.          }
  39.      </style>
  40.      <script>
  41.          function Masonry(el){
  42.              this.el = el;
  43.              this.$el = $(el);
  44.              this.size = 0;
  45.          }
  46.  
  47.          Masonry.prototype = {
  48.              constructor:Masonry,
  49.              init: function(){
  50.                  this.size = this.$el.find('.lv-masonry-item').length;
  51.                  var heights = [{}];
  52.                  for(var i=1; i<=this.size; i++){
  53.                      var e = {};
  54.                      var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
  55.                      e.height = $e.height();
  56.                      e.top = $e.offset().top;
  57.                      heights.push(e);
  58.                  }
  59.                  var index = this.$el.attr("class").indexOf("lv-masonry-");
  60.                  if(index > -1){
  61.                      var clazz = this.$el.attr("class").substr(index);
  62.                      index = clazz.indexOf(" ");
  63.                      if(index > -1){
  64.                          clazz = clazz.substr(0, index);
  65.                      }
  66.                      clazz = clazz.substr(clazz.lastIndexOf("-") + 1);
  67.                      var start = parseInt(clazz);
  68.                      if(!isNaN(start)){
  69.                          var minpos = 1;
  70.                          var mintop = heights[1].top;
  71.                          for(var i=2; i<=start; i++){
  72.                              if(mintop > heights[i].top){
  73.                                  minpos = i;
  74.                                  mintop = heights[i].top;
  75.                              }
  76.                          }
  77.                          for(var i=1; i<=start; i++){
  78.                              if(minpos != i){
  79.                                  var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
  80.                                  $e.css("top", -1 * (heights[i].top - mintop) + "px");
  81.                              }
  82.                          }
  83.                          heights = [{}];
  84.                          for(var i=1; i<=this.size; i++){
  85.                              var e = {};
  86.                              var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')')
  87.                              e.height = $e.height();
  88.                              e.top = $e.offset().top;
  89.                              heights.push(e);
  90.                          }
  91.                          for(var i=start+1; i<=this.size; i++){
  92.                              var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')');
  93.                              var delta = 0;
  94.                              var temp = i;
  95.                              do{
  96.                                  delta += heights[temp-start].height + 10;
  97.                                  temp -= start;
  98.                              }while(temp > start);
  99.                              delta = heights[i].top - heights[temp].top - delta;
  100.                              $e.css("top", -1 * delta + "px");
  101.                          };
  102.                      }
  103.                  }
  104.              }
  105.          }
  106.  
  107.          $(function(){
  108.              var masonry = new Masonry('#masonry');
  109.              masonry.init();
  110.          });
  111.      </script>
  112.  </head>
  113.  <body>
  114.      <div class="lv-masonry lv-masonry-4" id="masonry">
  115.          <div class="lv-masonry-item" style="height:50px;">
  116.          1
  117.          </div>
  118.          <div class="lv-masonry-item" style="height:100px;">
  119.          2
  120.          </div>
  121.          <div class="lv-masonry-item" style="height:150px;">
  122.          3
  123.          </div>
  124.          <div class="lv-masonry-item" style="height:150px;">
  125.          4
  126.          </div>
  127.          <div class="lv-masonry-item" style="height:50px;">
  128.          5
  129.          </div>
  130.          <div class="lv-masonry-item" style="height:100px;">
  131.          6
  132.          </div>
  133.          <div class="lv-masonry-item" style="height:100px;">
  134.          7
  135.          </div>
  136.          <div class="lv-masonry-item" style="height:50px;">
  137.          8
  138.          </div>
  139.          <div class="lv-masonry-item" style="height:50px;">
  140.          9
  141.          </div>
  142.          <div class="lv-masonry-item" style="height:50px;">
  143.          10
  144.          </div>
  145.      </div>
  146.  </body>
  147.  </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. Python---遍历序列的各种方式

    本文主要列举使用for循环遍历类似list结果的方式,因为老是使用for e in w_list真的是太没创意了,这显然不是我的风格,嘿嘿... 1. for item in s: 遍历s中的元素 2 ...

  2. spoj periodni

    题解: dp 方程弄出来就好做了 代码: #include<bits/stdc++.h> ,M=; typedef int arr[N]; typedef long long ll; in ...

  3. redis主从简单配置

    网上有好多复杂的配置,这里我用的是windows版的redis,简单配置了下,试验了下主从,能正常使用. 1.redis-master文件夹(里面是redis),redis-slave文件夹(里面是r ...

  4. Visual Basic 2017 操作Excel和word【1】持续更新……

    我坚持在VB的路上走到黑…………  清单1.1  从应用程序对象导航到Excel中的工作表  Dim myWorkbooks As Excel.Workbooks = app.Workbooks ) ...

  5. eclipse工具类及插件（Eclipse超好用的插件推荐）

    https://blog.csdn.net/ghostxbh/article/details/80054948

  6. secondPage

    写的第二个页面,参照着别人的代码,网上找寻自己需要的标签,每个小地方都得试许多次才能明白标签的正确使用方法,自己动手写出来一个页面虽然超级粗糙,但是挺有收获的. <!DOCTYPE html&g ...

  7. 移动 Ubuntu16.04 桌面左侧任务栏到屏幕底部

    按下 Ctrl + Alt + t 键盘组合键调出终端,在终端中输入以下命令: gsettings set com.canonical.Unity.Launcher launcher-position ...

  8. oh_my_zsh

    oh_my_zsh  zsh默认已经安装   cat /etc/shells   查看安装没有   (https://xiaozhou.net/learn-the-command-line-iterm ...

  9. cython 成功创建import 模块

    又是因为别人代码里有这么一个部分,用到了cython,,简而言之,就是利用这个模块调用C语言,从而加速程序运行,其中具体怎么调用我还没整清楚,但基本用法差不多了解了. 1 安装:https://www ...

  10. mod_conference ESL控制二（事件）

    根据上篇所述功能需求,esl需要处理以下几类事件: ESL_EVENT_CHANNEL_*  #channel相关事件,用户判断参会者是否应答.计费 DTMF事件 #识别参会者按键,根据按键进行操作( ...