使用jquery+css实现瀑布流布局

虽然可以直接使用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>