纯js实现瀑布流展现照片(自动适应窗口大小)

实现瀑布流展现照片是一个常见的前端面试题目，这里提供一种利用纯JS实现瀑布流展现照片并自适应窗口大小的方法。实现该方法需要完成以下步骤：

1.根据窗口大小计算瀑布流展示区的宽度、每个卡片的宽度、每行可容纳的卡片个数和卡片间的间隔大小等几个参数，并将它们存储在一个变量对象中。同时，动态创建卡片，并根据图片大小将图片缩放至卡片容器大小。示例代码如下：

let containerWidth = document.querySelector('.container').clientWidth; // 获取容器宽度
let cardWidth = 240; // 卡片宽度
let gutter = 10; // 卡片间隔
let cardCount = Math.floor(containerWidth / (cardWidth + gutter)); // 每行容纳卡片的个数

// 创建卡片元素，并填充图片
function createCard(src) {
  let card = document.createElement('div');
  card.className = 'card';
  let img = new Image();
  img.onload = function() {
    let scale = cardWidth / img.width;
    let height = img.height * scale;
    card.style.height = height + 'px';
  }
  img.src = src;
  card.appendChild(img);
  return card;
}

// 初始化卡片布局
function initLayout(items) {
  let cards = [];

  for (let i = 0; i < items.length; i++) {
    let card = createCard(items[i]);
    cards.push(card);
    let index = i % cardCount;
    let left = index * (cardWidth + gutter);
    if (i < cardCount) {
      card.style.top = 0;
      card.style.left = left + 'px';
    } else {
      let minIndex = 0;
      let minHeight = cards[minIndex].offsetHeight;
      for (let j = 1; j < cardCount; j++) {
        let height = cards[j].offsetHeight;
        if (minHeight > height) {
          minHeight = height;
          minIndex = j;
        }
      }
      card.style.top = minHeight + gutter + 'px';
      card.style.left = minIndex * (cardWidth + gutter) + 'px';
    }
    document.querySelector('.container').appendChild(card);
  }
}

// 根据窗口大小重新计算参数并更新布局
function updateLayout() {
  let containerWidth = document.querySelector('.container').clientWidth;
  let newCardCount = Math.floor(containerWidth / (cardWidth + gutter));
  if (newCardCount != cardCount) {
    cardCount = newCardCount;
    let cards = Array.from(document.querySelectorAll('.card'));
    let heights = Array.from(cards, card => card.offsetHeight);
    for (let i = 0; i < cards.length; i++) {
      let index = i % cardCount;
      if (i < cardCount) {
        cards[i].style.top = 0;
        cards[i].style.left = index * (cardWidth + gutter) + 'px';
      } else {
        let minIndex = 0;
        let minHeight = heights[minIndex];
        for (let j = 1; j < cardCount; j++) {
          let height = heights[(i - cardCount) + j];
          if (minHeight > height) {
            minHeight = height;
            minIndex = j;
          }
        }
        cards[i].style.top = minHeight + gutter + 'px';
        cards[i].style.left = minIndex * (cardWidth + gutter) + 'px';
        heights[minIndex] += cards[i].offsetHeight + gutter;
      }
    }
  }
}

// 初始化和更新布局
let items = ['https://via.placeholder.com/300x400', 'https://via.placeholder.com/240x240', ...];
initLayout(items);
window.addEventListener('resize', updateLayout);

1. 使用无限滚动实现翻页效果，即在滚动到页面底部时，自动加载下一页的数据并添加到页面底部。示例代码如下：

let page = 2; // 初始页码
let isLoading = false; // 是否正在加载数据
let items = ['https://via.placeholder.com/300x400', 'https://via.placeholder.com/240x240', ...];

// 加载并添加数据
function loadAndAppendData() {
  isLoading = true;
  fetch(`https://example.com/api/data?page=${page}`)
    .then(res => res.json())
    .then(data => {
      items = items.concat(data); // 将新数据与旧数据合并
      let cards = data.map(createCard);
      cards.forEach(card => document.querySelector('.container').appendChild(card));
      isLoading = false;
      page++;
    })
    .catch(error => console.error(error))
}

// 监听滚动事件，如果滚动到页面底部则加载新数据
window.addEventListener('scroll', () => {
  if (isLoading) return; // 如果正在加载数据，则不执行后面的代码
  let containerHeight = document.querySelector('.container').offsetHeight;
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  let windowHeight = window.innerHeight;
  if (scrollTop + windowHeight >= containerHeight) {
    loadAndAppendData();
  }
});

总结：

这种方法可以在不使用jQuery等类库和框架的情况下，利用纯JS实现瀑布流展现照片并自适应窗口大小。其核心思想在于动态计算布局参数，实现卡片的瀑布流排列，并通过事件监听实现自适应窗口大小以及无限滚动的效果。