JavaScript-瀑布流+懒加载

瀑布流

 <style>
      body {
         margin: 0;
      }

      .list {
         list-style: none;
         margin: 0;
         padding: 0;
      }

      .list>li {
         float: left;
         font-size: 0;
      }

      .list>li>img {
         width: 100%;
      }
</style>

 <script type="module">
      import { createDom } from "./js/createDom.js";

      const COL = 5;
      //创建一个长度为COL的数值 并填充值为0
      var list = Array(COL).fill(0), n = 2;
      var ul;

      init();
      function init() {
         //创建ul 并设置类名为list
         ul = createDom("ul", { className: "list" });

         //向ulzhong添加内容
         //根据COL的大小转换为长度为COL的数组
         //创建出li 并且给li设置宽度
         ul.innerHTML = Array.from({ length: COL }).reduce((v, t) => v + `<li style="width:${100 / COL}%"></li>`, "");
         //把ul放到body中
         document.body.appendChild(ul)
         //调用loadImage 获取图片
         loadImage(`./img/${n}-.jpg`)
      }

      //加载图片函数
      function loadImage(src) {
         //实例化创建一个img对象
         var img = new Image();
         //把从上面获取到的地址设置为 img的地址
         img.src = src;
         //设置图片加载的侦听事件
         //每一张图片再加载完成之后 该事件都需要销毁 防止内存泄漏
         img.addEventListener("load", loadHandler, { once: true });
      }

      function loadHandler(e) {
         //找到数组中的最小值
         var min = Math.min(...list);
         //找到最小值在数组中的索引 并赋值给index
         var index = list.indexOf(min);

         //把加载的图片 根据上面获取的索引放到ul中
         //这里的this是当前加载的图片
         ul.children[index].appendChild(this);
         //ul.children[index] 是li
         // console.log(ul.children[index])
         // console.log(this)

         //高度 每添加一张图片高度都会累加
         list[index] += ul.children[index].offsetHeight;
         n++;
         //图片的地址最大为第 “79”
         if (n > 79) return;

         //n++ 后改变-->即获取下一张图片
         loadImage(`./img/${n}-.jpg`);
      }
</script>

懒加载

 <style>
      body {
         margin: 0;
      }

      .list {
         list-style: none;
         margin: 0;
         padding: 0;
      }

      .list>li {
         float: left;
         font-size: 0;
      }

      .list>li>img {
         width: 100%;
      }
</style>

<script type="module">
      import { createDom } from "./js/createDom.js";

      const COL = 5;
      var list = Array(COL).fill(0), n = 2;
      var ul;

      init();
      function init() {
         ul = createDom("ul", { className: "list" });
         ul.innerHTML = Array.from({ length: COL }).reduce((v, t) => v + `<li style="width:${100 / COL}%"></li>`, "");

         document.body.appendChild(ul);
         loadImage(`./img/${n}-.jpg`);
         //scroll事件是JavaScript中的一个事件，它会在用户滚动到指定位置或元素时触发。这个事件适用于所有可滚动的元素，包括window对象（即浏览器窗口）。
         document.addEventListener("scroll", scrollHandler);
      }

      function loadImage(src) {
         var img = new Image();
         img.src = src;
         img.addEventListener("load", loadHandler, { once: true });
      }

      function loadHandler(e) {
         var min = Math.min(...list);
         var index = list.indexOf(min);
         ul.children[index].appendChild(this);
         list[index] += ul.children[index].offsetHeight;


//document.body.scrollHeight --> body中内容的高度
//document.documentElement.scrollTop --> 滚动条已滚动的距离
//document.documentElement.clientHeight --> 可视窗口大小

//document.body.scrollHeight - document.documentElement.scrollTop --> 再窗口中显示的高度

         //若是该数字大于4则跳出
         if ((document.body.scrollHeight - document.documentElement.scrollTop) / document.documentElement.clientHeight > 4) return;
         continueLoadImg();
      }

      function scrollHandler(e) {
         //若是该数字小于2则继续加载图片
         if ((document.body.scrollHeight - document.documentElement.scrollTop) / document.documentElement.clientHeight < 2) {
            continueLoadImg();
         }
      }

      function continueLoadImg() {
         n++;
         if (n > 79) {
            n = 2;
         }
         loadImage(`./img/${n}-.jpg`)
      }
</script>