js实现瀑布流的三种方式比较

下面我将详细讲解“js实现瀑布流的三种方式比较”的完整攻略。

什么是瀑布流布局

瀑布流布局是一种常见的网页布局方式，主要特点是把内容块按照一定的规则摆放在页面上，使页面看起来像瀑布流一般自然流畅。

三种实现瀑布流的方式

第一种：通过CSS实现瀑布流

这种方式利用CSS3的column属性实现布局。首先将要布局的元素放进一个容器中，并将容器的column-count属性设置为需要的列数，然后浏览器会自动将内容块分配到不同的列中。这种方式的优点是简单易用，不需要使用JavaScript实现，但是缺点是不支持瀑布流的动态加载，仅适用于静态页面。

.container {
  column-count: 3;
}

第二种：通过JavaScript手动实现瀑布流

这种方式是通过手动计算每个块的宽度、高度以及位置，然后将它们放进对应的列中。比较常见的做法是通过维护一个数组来记录每一列的高度，然后将每个块插入到高度最小的那列中。但是这种方式存在性能问题，在元素数量较多时会有明显的卡顿现象。

const container = document.querySelector('.container');
const blocks = container.querySelectorAll('.block');
const colCount = 3;
const colHeights = [];

for (let i = 0; i < colCount; i++) {
  colHeights[i] = 0;
}

blocks.forEach((block) => {
  const minColIndex = colHeights.indexOf(Math.min(...colHeights));
  const left = minColIndex * (block.offsetWidth + 10) + 'px';
  const top = colHeights[minColIndex] + 'px';
  block.style.left = left;
  block.style.top = top;
  colHeights[minColIndex] += block.offsetHeight + 10;
});

第三种：利用瀑布流库实现瀑布流

瀑布流库是一款封装了瀑布流布局的JavaScript库，常见的库包括Masonry.js和Isotope.js。这种方式优点是支持动态加载，并且库中已经实现了很多优化，可以避免第二种方式中存在的性能问题。缺点是需要额外引入库文件，增加了页面的加载时间和文件大小。

const container = document.querySelector('.container');
const msnry = new Masonry(container, {
  itemSelector: '.block',
  columnWidth: 200,
  gutter: 10,
});

示例说明

下面对上文中的每种方式进行示例说明：

示例一：通过CSS实现瀑布流

<div class="container">
  <div class="block">图片1</div>
  <div class="block">图片2</div>
  <div class="block">图片3</div>
  <div class="block">图片4</div>
  <div class="block">图片5</div>
  <div class="block">图片6</div>
  <div class="block">图片7</div>
  <div class="block">图片8</div>
  <div class="block">图片9</div>
</div>

.container {
  column-count: 3;
}
.block {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  break-inside: avoid; /* 避免元素跨列 */
}

上述示例中，我们首先将图片放进一个容器中，然后将容器的column-count设置为3，就可以实现图片的瀑布流布局。这种方式的优点是简单易用，但缺点是不支持动态加载。

示例二：通过JavaScript手动实现瀑布流

<div class="container">
  <div class="block">图片1</div>
  <div class="block">图片2</div>
  <div class="block">图片3</div>
  <div class="block">图片4</div>
  <div class="block">图片5</div>
  <div class="block">图片6</div>
  <div class="block">图片7</div>
  <div class="block">图片8</div>
  <div class="block">图片9</div>
</div>

const container = document.querySelector('.container');
const blocks = container.querySelectorAll('.block');
const colCount = 3;
const colHeights = [];

for (let i = 0; i < colCount; i++) {
  colHeights[i] = 0;
}

blocks.forEach((block) => {
  const minColIndex = colHeights.indexOf(Math.min(...colHeights));
  const left = minColIndex * (block.offsetWidth + 10) + 'px';
  const top = colHeights[minColIndex] + 'px';
  block.style.left = left;
  block.style.top = top;
  colHeights[minColIndex] += block.offsetHeight + 10;
});

上述示例中，我们使用JavaScript手动计算每个图片的位置，并通过CSS设置left和top来实现布局。需要注意的是，图片之间需要有一定的间距。这种方式的优点是可以动态加载图片，但缺点是性能问题，需要手动计算位置。

示例三：利用瀑布流库实现瀑布流

<div class="container">
  <div class="block">图片1</div>
  <div class="block">图片2</div>
  <div class="block">图片3</div>
  <div class="block">图片4</div>
  <div class="block">图片5</div>
  <div class="block">图片6</div>
  <div class="block">图片7</div>
  <div class="block">图片8</div>
  <div class="block">图片9</div>
</div>

const container = document.querySelector('.container');
const msnry = new Masonry(container, {
  itemSelector: '.block',
  columnWidth: 200,
  gutter: 10,
});

上述示例中，我们引入了Masonry.js库，并使用new Masonry()方法初始化瀑布流布局。这种方式的优点是简单易用，没有性能问题，但需要额外引入库文件。