js实现动态加载数据瀑布流

实现动态加载数据瀑布流需要以下步骤：

1. 设计页面布局

首先需要先设计好页面布局，确定每个瀑布流格子的大小，间距，位置等。一般放置瀑布流的容器是使用固定宽度的div，设置其为相对定位，然后每一个瀑布流格子都设置为绝对定位，根据不同的位置进行定位。

1. 获取数据源

动态加载数据需要从后端获取数据源，可以通过Ajax请求后端获取数据，后端返回的数据一般是JSON格式的数据，包含图片地址和描述等。

1. 数据处理

接收到后端返回的数据后，需要进行数据处理。由于瀑布流的特性决定了每个格子的高度不相同，所以需要先确定前几个格子的高度，然后把接下来的图片依据高度低的放在前面。可通过jQuery或者原生JavaScript的dom操作获取每个图片的高度，然后遍历查找当前高度最低的一列，将图片插入到该列中。

1. 触发加载

将数据处理完后，必须确定什么时候加载，即需要通过用户的滚动事件来触发加载。当用户滚动到组件的底部的时候，才开始重新请求后端数据，进行数据处理，再将新请求的数据插入到最小高度的列中。

示例：

HTML代码：

<div class="waterfall">
  <div class="waterfall-item"></div>
  <div class="waterfall-item"></div>
  <div class="waterfall-item"></div>
</div>

CSS代码：

.waterfall {
  width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}
.waterfall-item {
  width: 400px;
  margin: 0 20px 20px 0;
  float: left;
  position: absolute;
}

JavaScript代码：

$(window).on('scroll', function() {
  let maxHeight = 0;
  let minHeight = 0;
  let minIndex = 0;
  const $items = $('.waterfall-item');
  $.each($items, function(i, el) {
    const $el = $(el);
    const elHeight = $el.outerHeight();
    if (i === 0) {
      maxHeight = minHeight = elHeight;
    }
    if (elHeight > maxHeight) {
      maxHeight = elHeight;
    }
    if (elHeight < minHeight) {
      minHeight = elHeight;
      minIndex = i;
    }
  })
  const lastEl = $items.eq($items.length - 1);
  if (lastEl.length && lastEl.offset().top < $(window).scrollTop() + $(window).height()) {
    $.ajax({
      url: 'http://localhost:8000/getdata',
      type: 'GET',
      success: function(data) {
        $.each(data, function(i, el) {
          const $img = $('<img/>');
          $img.attr({
            src: el.imgUrl,
            alt: el.title
          })
          const $desc = $('<p/>');
          $desc.text(el.title);
          const $item = $('<div/>').addClass('waterfall-item').append($img).append($desc);
          if (i >= minIndex && i <= minIndex + 2) {
            $item.css('top', `${maxHeight}px`);
            maxHeight += $item.outerHeight() + 20;
          } else {
            $item.css('top', `${minHeight}px`);
            minHeight += $item.outerHeight() + 20;
          }
          $('.waterfall').append($item);
        })
      }
    })
  }
})

以上是使用jQuery的实现示例，还可以使用原生JavaScript实现，代码基本相同，只是操作dom的方式不同。