实现瀑布流布局

瀑布流布局

原生js实现瀑布流

实现思路：

• 父元素设置相对定位，子元素设置绝对定位
• 先根据想要的列数，设置top和left，定位好第一行的元素
• 这时候每一列都有了高度，将每一列的高度保存到一个数组中
• 定位剩余元素的时候，设置top和left，每次将元素定位到高度最小的那列

假设现在列数是4，根据列数确定好每列的宽度width，先对第一行进行定位

高度最小的是第二列，将下一个元素定位到第二列

高度最小的是第三列，将下一个元素定位到第三列

就这样依次对每个子元素进行定位，就可以实现瀑布流

具体实现代码如下，

css

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow-x: hidden;
    }

    #masonry {
      position: relative;
    }

    .item {
      box-sizing: border-box;
      position: absolute;
      padding: 5px;
      /* 设置子元素的宽度为视口宽度的20%，瀑布流分为5列 */
      width: 20%;
      height: auto;
    }
　　 /* 当窗口的宽度小于860px时，设置子元素的宽度为视口宽度的25%，瀑布流分为4列 */
    @media screen and (max-width: 860px) {
      .item {
        box-sizing: border-box;
        position: absolute;
        padding: 5px;
        width: 25%;
        height: auto;
      }
    }

    img {
      display: block;
      width: 100%;
    }
  </style>

 

html

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

 

javascript

var fun = function () {
      // 获取窗口宽度
      var html = document.documentElement.clientWidth
      // 获取子元素宽度，也就是每列的宽度
      var w = document.querySelector('.item').clientWidth
      // 计算列数
      var x = html / w

      var items = document.querySelectorAll('.item')
      var arr = []
      for (var i = 0; i < items.length; i++) {
        if (i < x) {
          // 定位第一行
          arr.push(items[i].clientHeight)
          items[i].style.top = 0
          items[i].style.left = i * w + 'px'
        } else {
          var min = 0
          for (var j = 1; j < arr.length; j++) {
            if (arr[min] > arr[j]) {
              min = j
            }
          }
          items[i].style.top = arr[min] + 'px'
          items[i].style.left = min * w + 'px'
          arr[min] += items[i].clientHeight
        }
      }
    }

    // 获取图片高度时，要确保图片加载完毕
    window.onload = fun

    // 窗口大小变化时，重新执行函数，计算列数，计算元素大小
    window.onresize = fun

 

css3实现瀑布流

css3中新增了属性column-count和column-gap，前者可以指定元素分为几列，后者可以指定每列之间的距离

css

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #masonry {
      column-count: 5;
      column-gap: 5px;
    }

    @media screen and (max-width: 860px) {
      #masonry {
        column-count: 4;
        column-gap: 5px;
      }
    }

    .item {
　　　 box-sizing: border-box;
　　   width: 100%;
      padding: 5px;
    }

    .item img {
      display: block;
      width: 100%;
    }
  </style>