JS瀑布流实现方法实例分析

瀑布流布局是一种常用的网页布局方式，具有美观简洁、适合显示大量图片等特点。本文将详细讲解如何使用JavaScript实现瀑布流布局。

实现原理

瀑布流布局的实现原理主要有两点：

1. 以列为单位，每一列假设有相同的宽度，每个元素按照顺序依次放置在各列中，列的高度不断变化；
2. 元素的位置需要经过计算，如果某个元素的位置高度最小，就将该元素放置到该列中，并更新该列的高度。

实现步骤

为实现瀑布流布局，我们需要进行以下步骤：

1. 构建HTML结构
2. 加载图片资源
3. 计算图片的高度和位置信息
4. 通过CSS设置图片的样式和位置
5. 及时更新列的高度

代码示例

构建HTML结构

HTML结构

<div class="waterfall">
  <div class="waterfall-item"><img src="1.jpg"></div>
  <div class="waterfall-item"><img src="2.jpg"></div>
  <div class="waterfall-item"><img src="3.jpg"></div>
  <div class="waterfall-item"><img src="4.jpg"></div>
  <div class="waterfall-item"><img src="5.jpg"></div>
  <div class="waterfall-item"><img src="6.jpg"></div>
  <div class="waterfall-item"><img src="7.jpg"></div>
  <div class="waterfall-item"><img src="8.jpg"></div>
  <div class="waterfall-item"><img src="9.jpg"></div>
  <div class="waterfall-item"><img src="10.jpg"></div>
</div>

加载图片资源

通过JavaScript加载图片资源

let imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];
let images = [];

for (let i = 0; i < imgList.length; i++) {
  let img = new Image();
  img.src = imgList[i];
  images.push(img);
}

// 等待图片加载完成
Promise.all(images.map(img => img.decode())).then(() => {
  // 图片加载完成后的代码
});

计算图片的高度和位置信息

通过JavaScript计算图片的高度和位置信息

let columnWidth = 200; // 列宽
let columnCount = 3; // 列数
let columnHeights = [0, 0, 0]; // 列高度
let list = document.querySelectorAll('.waterfall-item');

for (let i = 0; i < list.length; i++) {
  let img = list[i].querySelector('img');
  let ratio = img.width / columnWidth; // 图片缩放比例
  let height = img.height / ratio; // 图片高度
  let index = 0; // 找到高度最小的列

  for (let j = 0; j < columnCount; j++) {
    if (columnHeights[j] < columnHeights[index]) {
      index = j;
    }
  }

  list[i].style.left = columnWidth * index + 'px'; // 设置左侧位置
  list[i].style.top = columnHeights[index] + 'px'; // 设置顶部位置
  list[i].style.width = columnWidth + 'px'; // 设置宽度
  columnHeights[index] += height; // 更新该列的高度
}

通过CSS设置图片的样式和位置

通过CSS设置图片的样式和位置

.waterfall {
  position: relative;
}

.waterfall-item {
  position: absolute;
  margin-bottom: 20px;
}

及时更新列的高度

及时更新列的高度

window.addEventListener('resize', () => {
  columnHeights = [0, 0, 0]; // 重置列高度

  for (let i = 0; i < list.length; i++) {
    let img = list[i].querySelector('img');
    let ratio = img.width / columnWidth; // 图片缩放比例
    let height = img.height / ratio; // 图片高度
    let index = 0; // 找到高度最小的列

    for (let j = 0; j < columnCount; j++) {
      if (columnHeights[j] < columnHeights[index]) {
        index = j;
      }
    }

    list[i].style.left = columnWidth * index + 'px'; // 设置左侧位置
    list[i].style.top = columnHeights[index] + 'px'; // 设置顶部位置
    columnHeights[index] += height; // 更新该列的高度
  }
});

示例说明

示例一：使用jQuery实现瀑布流布局

$('.waterfall').imagesLoaded(function () {
  $('.waterfall').masonry({
    itemSelector: '.waterfall-item',
    columnWidth: 200
  });
});

示例二：Vue中使用masonry和imagesLoaded插件实现瀑布流布局

<template>
  <div class="waterfall">
    <div class="waterfall-item" v-for="(img, index) in imgList" :key="index">
      <img :src="img.url" alt="">
    </div>
  </div>
</template>

<script>
import Masonry from 'masonry-layout';
import imagesLoaded from 'imagesloaded';

export default {
  data() {
    return {
      imgList: [
        {url: '1.jpg'},
        {url: '2.jpg'},
        {url: '3.jpg'},
        {url: '4.jpg'},
        {url: '5.jpg'},
        {url: '6.jpg'},
        {url: '7.jpg'},
        {url: '8.jpg'},
        {url: '9.jpg'},
        {url: '10.jpg'}
      ]
    };
  },
  mounted() {
    imagesLoaded('.waterfall', function () {
      var masonry = new Masonry('.waterfall', {
        itemSelector: '.waterfall-item',
        columnWidth: 200
      });
    });
  }
};
</script>

<style>
.waterfall {
  position: relative;
}

.waterfall-item {
  position: absolute;
  margin-bottom: 20px;
}
</style>

结语

以上就是JavaScript实现瀑布流布局的完整攻略，关键是要理解好瀑布流布局的实现原理，然后根据自己的需求进行相应的编码实现。