加载源

// 这里存后台发来的数据

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 ();

  }

});