js原生瀑布流插件制作

下面我将详细讲解制作 JavaScript 原生瀑布流插件的攻略。

1. 瀑布流布局

瀑布流布局是一种常见的网页布局形式，它的主要特点是多列等宽的布局，每一列中的元素高度可以不同，元素按顺序从上到下排列。这种布局形式可以很好地展示图片、文章等内容。

实现瀑布流布局的方式有很多种，其中一种常见的方式是使用 JavaScript 代码动态计算元素的位置和大小。下面是实现这种方式的代码示例：

const columns = 3; // 列数
const articleList = document.querySelectorAll('.article'); // 获取要排列的元素列表

const columnHeights = [];
for(let i = 0; i < columns; i++) {
  columnHeights.push(0); // 初始化每一列的高度为0
}

for(let i = 0; i < articleList.length; i++) {
  const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
  // 找出当前高度最小的一列的索引

  articleList[i].style.position = 'absolute';
  articleList[i].style.left = `${minHeightIndex * (articleList[i].offsetWidth + 20)}px`;
  articleList[i].style.top = `${columnHeights[minHeightIndex]}px`;

  columnHeights[minHeightIndex] += articleList[i].offsetHeight + 20; // 更新当前列的高度
}

上述代码中，首先定义了 columns、articleList、columnHeights 三个变量：

• columns 表示要排列的瀑布流列数；
• articleList 是一个元素列表，包含要排列的所有元素；
• columnHeights 是一个数组，记录每一列的高度。

在代码中，我们循环遍历 articleList 中的所有元素，通过 Math.min(...columnHeights) 找出当前高度最小的一列的索引，然后计算该元素的位置（左侧距离为该列索引乘以元素宽度加上一定的外边距，顶部距离为该列高度），最后更新当前列的高度为该元素的高度加上一定的外边距。

2. 瀑布流插件封装

将瀑布流布局封装成插件的好处在于可以提高代码的复用性，同时也可以方便的扩展一些功能，比如加载更多数据、响应式布局等。

下面我来讲解一个简单的瀑布流插件的制作过程，假设插件的名称为 waterfall。

首先，在 HTML 中定义要排列的元素的容器，如下：

<div class="waterfall-container">
  <div class="waterfall-item">item 1</div>
  <div class="waterfall-item">item 2</div>
  <div class="waterfall-item">item 3</div>
  <!-- ... -->
</div>

然后，在 JavaScript 中编写 waterfall 插件的代码，实现瀑布流布局的功能。具体代码如下：

(function($) {
  $.fn.waterfall = function(options) {
    const settings = $.extend({}, {
      columns: 3, // 瀑布流列数
      margin: 20, // 元素之间的外边距
    }, options);

    this.each(function() {
      const container = $(this);
      const items = container.children('.waterfall-item');
      const columnHeights = new Array(settings.columns).fill(0);

      items.each(function(index) {
        const $this = $(this);
        const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
        const leftPos = minHeightIndex * ($this.outerWidth() + settings.margin);

        $this.css({
          position: 'absolute',
          left: `${leftPos}px`,
          top: `${columnHeights[minHeightIndex]}px`,
        });
        columnHeights[minHeightIndex] += $this.outerHeight() + settings.margin;
      });

      container.css('height', Math.max(...columnHeights)); // 设置容器高度为最大列的高度
    });

    return this;
  };
})(jQuery);

上面的代码中，我们通过 $.fn 定义了 waterfall 插件，该函数接受一个参数 options，可用于设置瀑布流的参数，如 columns 和 margin。在函数内部，通过 $.extend 将用户传递的 options 与默认参数进行合并，并使用 this.each 遍历元素列表，为每个元素执行瀑布流布局操作。

最后，可以在 JavaScript 中调用该插件，如下：

$('.waterfall-container').waterfall({
  columns: 4,
  margin: 10,
});

示例1：使用 waterpipe 瀑布流插件

如果你不想自己编写瀑布流插件，也可以使用第三方插件，如 waterpipe。这个插件支持动态加载数据、容器滚动加载等功能。

首先，在 HTML 中引入 jQuery 和 waterpipe 插件的 JS 文件，如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./waterpipe.min.js"></script>

然后，定义要排列的元素的容器，如下：

<div class="wp-container"></div>

接着，在 JavaScript 中编写获取数据的函数和渲染数据的函数，如下：

function getData(pageIndex, pageSize) {
  return $.ajax({
    url: `https://jsonplaceholder.typicode.com/photos?_page=${pageIndex}&_limit=${pageSize}`,
    dataType: 'json',
  });
}

function renderData(data) {
  const tpl = data.map(item => `
    <div class="wp-item">
      <img src="${item.thumbnailUrl}" alt="">
      <p>${item.title}</p>
    </div>
  `).join('');
  $('.wp-container').append(tpl);
}

最后，使用 waterpipe 插件进行瀑布流布局操作，如下：

$('.wp-container').waterpipe({
  load: function(pageIndex) {
    return getData(pageIndex, 10).then(renderData);
  },
  threshold: 100,
  columns: 4,
  margin: 10,
});

上面的代码中，我们通过 load 选项定义了获取数据的函数，threshold 选项定义了滚动到底部的阈值，columns 和 margin 选项分别定义了瀑布流的列数和元素之间的外边距。