用原生JavaScript写一个适配任何浏览器的瀑布流插件，支持滚动加载

好的，我可以为您介绍一个基于原生 JavaScript 的瀑布流插件 Masonry，并且可以实现滚动加载。

首先，您需要在 HTML 中引入 Masonry 的 JavaScript 文件：

<script src="path/to/masonry.pkgd.min.js"></script>

然后，您需要准备一个容器元素，例如：

<div id="masonry-container"></div>

接下来，您可以在 JavaScript 中初始化 Masonry：

var container = document.getElementById('masonry-container');
var masonry = new Masonry(container, {
  // 在这里设置 Masonry 的选项
  itemSelector: '.masonry-item',
  columnWidth: 200,
  gutter: 10
});

在上面的代码中，`itemSelector` 表示您要使用 Masonry 布局的每个子元素的选择器，`columnWidth` 表示每列的宽度，`gutter` 表示列之间的间距。

现在，您可以将一些子元素添加到容器中，并在添加后调用 `masonry.layout()` 方法来触发布局：

var item1 = document.createElement('div');
item1.classList.add('masonry-item');
item1.style.height = '100px';
container.appendChild(item1);

var item2 = document.createElement('div');
item2.classList.add('masonry-item');
item2.style.height = '150px';
container.appendChild(item2);

// 触发布局
masonry.layout();

最后，如果您想要实现滚动加载，您可以使用 JavaScript 监听 `window` 对象的 `scroll` 事件，并在滚动到底部时加载更多子元素：

window.addEventListener('scroll', function() {
  var containerRect = container.getBoundingClientRect();
  if (containerRect.bottom <= window.innerHeight) {
    // 加载更多子元素到容器中
    // ...
    // 触发布局
    masonry.layout();
  }
});

在上面的代码中，`container.getBoundingClientRect().bottom` 表示容器元素底部相对于视口的位置，`window.innerHeight` 表示视口高度。如果容器底部在视口内，那么就加载更多子元素并触发布局。

以上就是一个简单的、适配任何浏览器的瀑布流插件的实现。