使用js语言实现手机端瀑布流效果

以下是使用JavaScript和CSS实现手机端瀑布流效果的示例代码：

HTML代码：

<div class="grid-container">
  <div class="grid-item"><img src="image1.jpg"></div>
  <div class="grid-item"><img src="image2.jpg"></div>
  <div class="grid-item"><img src="image3.jpg"></div>
  <div class="grid-item"><img src="image4.jpg"></div>
  <div class="grid-item"><img src="image5.jpg"></div>
  <div class="grid-item"><img src="image6.jpg"></div>
  <div class="grid-item"><img src="image7.jpg"></div>
  <div class="grid-item"><img src="image8.jpg"></div>
  <div class="grid-item"><img src="image9.jpg"></div>
  <div class="grid-item"><img src="image10.jpg"></div>
</div>

CSS代码：

.grid-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.grid-item {
  margin: 10px;
  width: calc(33.33% - 20px);
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.grid-item img {
  width: 100%;
  height: auto;
}

JavaScript代码：

var container = document.querySelector('.grid-container');
var items = document.querySelectorAll('.grid-item');
var columns = 3;

function updateLayout() {
  var heights = [];

  for (var i = 0; i < columns; i++) {
    heights.push(0);
  }

  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    var columnIndex = i % columns;
    var height = item.offsetHeight;

    if (heights[columnIndex] > 0) {
      item.style.transform = 'translateY(' + heights[columnIndex] + 'px)';
    }

    heights[columnIndex] += height;
  }

  var maxHeight = Math.max.apply(null, heights);
  container.style.height = maxHeight + 'px';
}

window.addEventListener('load', updateLayout);
window.addEventListener('resize', updateLayout);

说明：

- HTML中的`.grid-container`是一个包含所有网格项的容器元素。
- CSS中使用Flexbox布局来实现网格布局，每个网格项的宽度为33.33%，即每行有3个网格项。
- JavaScript代码中，`updateLayout`函数用于更新网格布局。首先创建一个空数组`heights`，用于存储每一列的高度。然后遍历每个网格项，计算出它的高度和它所在的列，将它的高度加到`heights`数组中，并设置它的`transform`属性，使它在垂直方向上正确地对齐。最后，计算出所有列中的最大高度，将它设置为容器元素的高度。
- `window.addEventListener('load', updateLayout)`用于在文档加载完毕后初始化网格布局。
- `window.addEventListener('resize', updateLayout)`用于在窗口大小改变时更新网格布局。