waterfall瀑布流布局+动态渲染的实现

waterfall瀑布流布局是指在页面中展示多个不同高度的元素，布局方式类似于瀑布流般呈现，在移动端中常用于图片、商品等列表的展示。动态渲染则是指根据用户的操作或其他条件，在页面中动态添加元素，通常使用ajax异步请求数据，再通过JavaScript动态创建DOM元素实现。

实现瀑布流布局的关键在于计算和设置每个元素的位置，一般有以下几个步骤：

1. 计算每列的宽度，可以根据页面宽度和每列的数量计算得到。

2. 使用一个数组来存储每列当前的高度，初始值都为0。

3. 循环遍历所有的元素，对于每个元素，找到当前高度最小的列，然后将元素插入到该列的下面，同时更新该列的高度。

代码示例：

<!-- HTML结构 -->
<div class="waterfall">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  ...
</div>

<!-- CSS样式 -->
.waterfall {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.col {
  width: calc(33.33% - 6.67px);
}

<!-- JavaScript实现 -->
const waterfall = document.querySelector('.waterfall');
const cols = Array.from(document.querySelectorAll('.col'));

const colHeight = [0, 0, 0]; // 初始高度数组
const colCount = colHeight.length;

cols.forEach((col) => {
  const minColHeight = Math.min(...colHeight);
  const minColIndex = colHeight.indexOf(minColHeight);
  const colWidth = col.offsetWidth;
  const colTop = minColHeight + 20;

  col.style.width = colWidth + 'px';
  col.style.top = colTop + 'px';
  col.style.left = minColIndex * (colWidth + 20) + 'px';

  colHeight[minColIndex] = colTop + col.offsetHeight;
});

waterfall.style.height = Math.max(...colHeight) + 'px';

接下来需要实现动态渲染的功能，实现步骤大致为：

1. 绑定滚动事件，当滚动到页面底部时触发加载更多元素的函数。

2. 在加载更多元素的函数中，使用ajax异步请求数据，然后将数据逐个插入到页面中。

3. 对于新插入的元素，计算出其应该插入的列，然后更新该列的高度。

代码示例：

<!-- HTML结构 -->
<div class="waterfall">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  ...
</div>

<!-- CSS样式 -->
.waterfall {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.col {
  width: calc(33.33% - 6.67px);
}

<!-- JavaScript实现 -->
const waterfall = document.querySelector('.waterfall');
const colHeight = [0, 0, 0]; // 初始高度数组
const colCount = colHeight.length;

function loadData() {
  fetch('https://example.com/api/data')
    .then((response) => response.json())
    .then((data) => {
      data.forEach((item) => {
        const col = document.createElement('div');
        col.classList.add('col');
        col.innerHTML = `
          <img src="${item.imgUrl}" alt="">
          <p>${item.title}</p>
        `;

        const minColHeight = Math.min(...colHeight);
        const minColIndex = colHeight.indexOf(minColHeight);
        const colWidth = col.offsetWidth;
        const colTop = minColHeight + 20;

        col.style.width = colWidth + 'px';
        col.style.top = colTop + 'px';
        col.style.left = minColIndex * (colWidth + 20) + 'px';

        waterfall.appendChild(col);
        colHeight[minColIndex] = colTop + col.offsetHeight;
      });

      waterfall.style.height = Math.max(...colHeight) + 'px';
    })
    .catch((err) => console.error('Error:', err));
}

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const clientHeight = document.documentElement.clientHeight;
  const scrollHeight = document.documentElement.scrollHeight;

  if (scrollTop + clientHeight >= scrollHeight - 200) {
    loadData();
  }
});

综上所述，实现waterfall瀑布流布局+动态渲染的过程需要以下几个步骤：

1. 布局：使用CSS和JavaScript计算和设置每个元素的位置，并实现瀑布流布局。

2. 动态渲染：绑定滚动事件，异步请求数据，创建元素，并根据瀑布流布局的规则插入到页面中。

以上是实现waterfall瀑布流布局+动态渲染的完整攻略，希望对你有帮助，若有不清楚之处，可随时追问。