canvas 实现瀑布效果

实现瀑布效果主要需要以下步骤：

1. 获取图片数据

使用 JavaScript 获取图片数据，可以通过 AJAX 请求或者使用 HTML5 文件读取器来获取。

2. 计算图片位置

将所有图片位置计算出来，需要根据图片高度来计算，将图片放置在高度最低的列，以达到瀑布效果。

3. 绘制图片

使用 Canvas 绘制图片，可以使用 drawImage() 方法将图片绘制到 Canvas 上。

4. 实现滚动加载

当页面滚动到底部时，使用 AJAX 请求加载更多图片数据，然后再次计算图片位置并绘制。

以下是一个简单的 Canvas 瀑布效果实现示例代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imgData = [];

// 获取图片数据
function getImageData() {
  // 使用 AJAX 请求获取图片数据
  // 或者使用 HTML5 文件读取器来获取
  // 这里省略
}

// 计算图片位置
function calculateImgPosition() {
  var columnCount = 3; // 列数
  var columnHeight = []; // 每列的高度
  var imgWidth = 200; // 图片宽度
  var imgMargin = 10; // 图片间距
  var x = 0, y = 0;

  for (var i = 0; i < imgData.length; i++) {
    var imgHeight = imgData[i].height * imgWidth / imgData[i].width; // 根据宽高比计算图片高度
    var columnIndex = 0;

    // 找到高度最低的列
    for (var j = 1; j < columnCount; j++) {
      if (columnHeight[j] < columnHeight[columnIndex]) {
        columnIndex = j;
      }
    }

    // 计算图片位置
    x = columnIndex * (imgWidth + imgMargin);
    y = columnHeight[columnIndex];
    imgData[i].x = x;
    imgData[i].y = y;

    // 更新列高度
    columnHeight[columnIndex] += imgHeight + imgMargin;
  }
}

// 绘制图片
function drawImages() {
  for (var i = 0; i < imgData.length; i++) {
    ctx.drawImage(imgData[i].img, imgData[i].x, imgData[i].y, imgWidth, imgHeight);
  }
}

// 实现滚动加载
window.onscroll = function () {
  if (document.documentElement.clientHeight + document.documentElement.scrollTop == document.body.scrollHeight) {
    // 加载更多图片数据
    getImageData();
    // 重新计算图片位置并绘制
    calculateImgPosition();
    drawImages();
  }
};