JS簡單實現滾動自動加載新內容（懶加載）

加載源

// 這里存后台發來的數據
var galleryList = [
  {
    src: "./images/1.jpeg",
    desc: "11111"
  },
  {
    src: "./images/1.jpeg",
    desc: "11111"
  },
  {
    src: "./images/1.jpeg",
    desc: "11111"
  },
  {
    src: "./images/1.jpeg",
    desc: "11111"
  }
];

單個渲染函數

//渲染單個GalleryItem
function renderGalleryItem(item) {
  const aItem = document.createElement("div");
  const inner = `<div> <p class="card__text"> ${item.desc} </p> <img src=${item.src} /> </div>`;
  aItem.innerHTML = inner;
  return aItem;
}

批量渲染函數

const galleryAutoLoad = (list => {
  //用於記錄當前到第幾個
  let cur = 0;
  //每次調用函數渲染多少個
  const step = 1;
  return () => {
    for (let i = cur; i < cur + step; i++) {
      if (list[i]) {
        //將渲染的添加到dom節點上 appendChild用來添加，加入需要覆蓋的話可以直接用innerHTML
        container.appendChild(renderGalleryItem(list[i]));
      } else {
        break;
      }
    }
    cur += step;
  };
})(galleryList); //這是內容變量

綁定事件

//滾動加載
$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  if (scrollTop + windowHeight == scrollHeight) {
    galleryAutoLoad ();
  }
});