瀑布流的实现纯CSS实现Jquery实现

瀑布流的实现

注：本文部分图片自百度下载，如有侵权，联系删图。

首先，选择几张图片布局到HTML内容中。HTML如下所示。

 <div class="wrapper">
        <div class="item"><img src="img/1.jpg" height="auto"/></div>
        <div class="item"><img src="img/2.jpg" height="auto"/></div>
        <div class="item"><img src="img/3.jpg" height="auto"/></div>
        <div class="item"><img src="img/4.jpg" height="auto"/></div>
        <div class="item"><img src="img/5.jpg" height="auto"/></div>
        <div class="item"><img src="img/6.jpg" height="auto"/></div>
        <div class="item"><img src="img/7.jpg" height="auto"/></div>
        <div class="item"><img src="img/8.jpg" height="auto"/></div>
        <div class="item"><img src="img/9.jpg" height="auto"/></div>
        <div class="item"><img src="img/10.jpg" height="auto"/></div>
        <div class="item"><img src="img/11.jpg" height="auto"/></div>
        <div class="item"><img src="img/12.jpg" height="auto"/></div>
        <div class="item"><img src="img/13.jpg" height="auto"/></div>
        <div class="item"><img src="img/14.jpg" height="auto"/></div>
        <div class="item"><img src="img/15.jpg" height="auto"/></div>
    </div>

纯CSS实现

纯CSS实现较为简单，主要代码为设置列数和间距的两行。

/* 将边距设为0 */
*{
    margin:;
    padding:;
    border: none;
}
​
.wrapper{
    width: auto;
    height: auto;
    position: relative;
    margin: 0 auto;
    /* 设置列数和间距 */
    column-count:;
    column-gap:;
}
.item{
    position:relative;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 2px;
}
​
.item img{
    display: block;
    width: 100%;
    cursor: pointer;
    border-radius: 5px;
}
.item img:hover{
    opacity: 0.8;
}

Jquery实现

1. 有bug 的写法

   定义一个瀑布流方法：

    function waterfall(element,child,padding) {
       var child = $(child) || $('.item');
       var wrap = $(element) || $('.wrapper');
       var padding = padding || 25;
   ​
       // 宽度，所有元素宽度一致
       var itemW=$(".item").outerWidth(true);
   ​
      //  可容纳总列数
       var colNum=Math.floor(wrap.outerWidth(true)/child.outerWidth(true));
       console.log(colNum);//
   ​
      //  初始化第一列的top和left值
       var posi=new Array(colNum);
   ​
       $.each(posi,(i)=>{
           posi[i]=new Object();
           posi[i].top = padding;
           posi[i].left = padding + i * itemW;
   ​
       })
   
       //  每个元素所处列数
       var eleCol=[];
        //循环图片列表
       child.each(function (i) {
   
           if ((i+1)% colNum == 0) {
               eleCol[i] = colNum;
           }else{
               eleCol[i] = (i+1) % colNum;
           }
           var sub = eleCol[i]-1;
           var top = posi[sub].top+'px';
           var left = posi[sub].left+'px';
          //  设置每个元素的位置
           $(this).css({"position":"absolute","top" :top,"left" : left});
          //  每遍历完一次，重置top值
          posi[sub].top += $(this).outerHeight(true);
   ​
       })
   }

   该方法原理图如图所示：

   

   这是按照顺序，根据上行图片大小对定位加以调整的方式布局的。

   但是，这种方法会造成空行。如图：

   

   这是由于第一列某张图片过于大的缘故。

   因此，在做瀑布流时，应该根据已布局好的元素的高度进行剩余元素的布局。就是说，比如第一行元素已经布局完成，第二行元素应该先选择第一行元素中，高度最小的那个元素所在列进行插入。这样，才能保证不会出现某一列太长或者某一列过短的现象。

2. 根据以上分析，我们得到，实现瀑布流的核心其实是，找出图片高度最小的一列，并在此插入图片。

   改进后的瀑布流方法：

   function waterfall(element,child) {
       var child = $(child) || $('.item');
       var wrap = $(element) || $('.wrapper');
   ​
       // 宽度，所有元素宽度一致
       var itemW=$(".item").outerWidth(true);
   ​
      //  可容纳总列数
       var colNum=Math.floor(wrap.outerWidth(true)/child.outerWidth(true));
       console.log(colNum);//
   ​
   
       // 定义列高度数组并初始化
       var itemH = new Array(colNum);
       $.each(itemH,(i)=>{
           itemH[i]=0;
       })
   ​
   ​
        //循环图片列表
       child.each(function (i) {
           // 定义最小高度和对应的index并初始化
           var minHeight = itemH[0];
           var minIndex = 0;
           console.log("最初最小高度为："+minHeight+"下标为："+minIndex);
   ​
           // 存储本次循环对象的高度
           var thisH = $(this).outerHeight(true);
   ​
           $.each(itemH,(i)=>{
               if (itemH[i] < minHeight) {
                   minHeight = itemH[i];
                   minIndex = i;
               }
               console.log("比较后最小高度为："+minHeight+"下标为："+minIndex);
           })
   
   ​
           var sub = minIndex;
           var top = minHeight;
           var left = minIndex * itemW;
          //  设置每个元素的位置
           $(this).css({"position":"absolute","top" :top,"left" : left});
          //  每遍历完一次，重置列高度值
          itemH[sub] += thisH;
          console.log("itemH值："+itemH[sub]);
   ​
       })
   }

   如图所示：

   

代码实现链接: https://github.com/jiujiu12/web-practice/tree/master/%E7%80%91%E5%B8%83%E6%B5%81%E5%AE%9E%E7%8E%B0