纯js实现瀑布流布局及ajax动态新增数据

下面我会详细讲解如何使用纯js实现瀑布流布局及ajax动态新增数据，包括以下几个步骤。

步骤1：创建页面结构

在HTML文件中，我们需要创建一个用于显示瀑布流布局的容器，下面是示例代码：

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

步骤2：CSS样式设置

瀑布流布局需要使用CSS样式来设置每个子元素的位置和大小，在示例中，我们将使用flex布局来实现，示例代码如下：

.waterfall-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.waterfall-item {
  margin-bottom: 20px;
  width: calc(33.33% - 10px);
}

步骤3：获取数据并渲染页面

我们需要使用ajax去获取数据，然后将数据渲染在页面上。示例代码如下：

function loadData() {
  // 使用ajax获取数据
  ajax({
    url: '/api/data',
    success: function(data) {
      // 解析数据，生成HTML
      var html = '';
      data.forEach(function(item) {
        html += '<div class="waterfall-item"><img src="' + item.src + '"></div>';
      });
      // 将HTML添加到容器中
      document.querySelector('.waterfall-container').innerHTML += html;
    }
  });
}

// 使用定时器定时刷新数据
setInterval(function() {
  loadData();
}, 5000);

loadData();

步骤4：实现瀑布流布局

在实现瀑布流布局之前，需要解决每一列的高度不同的问题。我们可以使用一个数组来保存每一列的高度，每次添加一个新的元素时，根据列的高度来决定哪一列添加元素，然后更新该列的高度。具体实现如下：

// 保存每一列的高度
var colHeight = [0, 0, 0];

function addWaterfallItem(item) {
  // 找到高度最小的一列
  var minHeight = Math.min.apply(null, colHeight);
  var minIndex = colHeight.indexOf(minHeight);

  // 计算元素的位置
  var left = (minIndex / colHeight.length) * 100 + '%';
  var top = minHeight + 'px';

  // 添加元素到容器中
  item.style.position = 'absolute';
  item.style.left = left;
  item.style.top = top;
  document.querySelector('.waterfall-container').appendChild(item);

  // 更新列高度
  colHeight[minIndex] += item.offsetHeight + 20;
}

随后，在使用ajax加载数据的时候，将每个元素添加到布局容器中：

function loadData() {
  // 使用ajax获取数据
  ajax({
    url: '/api/data',
    success: function(data) {
      // 解析数据，生成HTML
      data.forEach(function(item) {
        var img = new Image();
        img.onload = function() {
          var div = document.createElement('div');
          div.className = 'waterfall-item';
          div.appendChild(img);
          addWaterfallItem(div);
        }
        img.src = item.src;
      });
    }
  });
}

到这里，一个使用纯js实现瀑布流布局及ajax动态新增数据的完整攻略就完成了。以下是一个基于上述代码的示例：

CodePen示例