虽然可以直接使用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 for(var i=start+1; i<=this.size; i++){ 70 var $e = this.$el.find('.lv-masonry-item:nth-child(' + i + ')'); 71 var delta = 0; 72 var temp = i; 73 do{ 74 delta += heights[temp-start].height + 10; 75 temp -= start; 76 }while(temp > start); 77 delta = heights[i].top - heights[temp].top - delta; 78 $e.css("top", -1 * delta + "px"); 79 }; 80 } 81 } 82 } 83 } 84 85 $(function(){ 86 var masonry = new Masonry('#masonry'); 87 masonry.init(); 88 }); 89 </script> 90 </head> 91 <body> 92 <div class="lv-masonry lv-masonry-4" id="masonry"> 93 <div class="lv-masonry-item" style="height:50px;"> 94 1 95 </div> 96 <div class="lv-masonry-item" style="height:100px;"> 97 2 98 </div> 99 <div class="lv-masonry-item" style="height:150px;"> 100 3 101 </div> 102 <div class="lv-masonry-item" style="height:150px;"> 103 4 104 </div> 105 <div class="lv-masonry-item" style="height:50px;"> 106 5 107 </div> 108 <div class="lv-masonry-item" style="height:100px;"> 109 6 110 </div> 111 <div class="lv-masonry-item" style="height:100px;"> 112 7 113 </div> 114 <div class="lv-masonry-item" style="height:50px;"> 115 8 116 </div> 117 <div class="lv-masonry-item" style="height:50px;"> 118 9 119 </div> 120 <div class="lv-masonry-item" style="height:50px;"> 121 10 122 </div> 123 </div> 124 </body> 125 </html>
代码中仅实现了两列、三列、四列和五列的布局，如果要增加其他的就添加类似如下的css代码即可：
在使用的时候要指定列，示例如下：
然后在jquery的loag方法中添加
var masonry = new Masonry('#masonry');
masonry.init();
便可使用瀑布流布局。