瀑布流

瀑布流：多列的不规则排列，每一列由很多块构成，每一块宽度固定，高度不固定，按照某种规则排列，最终这些列之间高度不能相差太大。同时当页面滑动到底部时就去加载下一页，并且为图片设置懒加载功能。

  • 思路：首先获取我们需要的数组（假设20条，一共三列）。
  • 每次从数据中取三个，接着把数据绑定成 html，插入到每一列中。
  • 为了保证插入数据后这些列的高度相差不大，在插入之前，先按照这些列的现有高度进行升序排列，然后每次取三条数据，按照排好的数组顺序，依次从高度最矮的插，然后给第二矮的插，最后给最高的插。
  • HTML代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>珠峰-瀑布流</title>
  6.     <link rel="stylesheet" href="css/reset.min.css">
  7.     <link rel="stylesheet" href="css/index2.css">
  8. </head>
  9. <body>
  10. <ul class="flowBox clearfix" id="flowBox">
  11.     <li data-height="0">
  12.         <!--<a href="javascript:void 0;">
  13.             <div><img src="img/13.jpg" alt=""></div>
  14.             <span>泰勒·斯威夫特（Taylor Swift），1989年12月13日出生于美国宾州，美国歌手、演员。2006年出道，同年发行专辑《泰勒·斯威夫特》，该专辑获得美国唱片业协会的白金唱片认证</span>
  15.         </a>-->
  16.     </li>
  17.     <li data-height="0"></li>
  18.     <li data-height="0"></li>
  19. </ul>
  20. <script src="js/utils.js"></script>
  21. <script src="js/2-index.js"></script>
  22. </body>
  23. </html>
  • css
  1. html, body {
  2.   background: #F4F4F4;
  3.   overflow-x: hidden;
  4. }
  6. .flowBox {
  7.   margin: 20px auto;
  8.   width: 1000px;
  9. }
  11. .flowBox li {
  12.   float: left;
  13.   margin-right: 20px;
  14.   width: 320px;
  15. }
  17. .flowBox li:nth-last-child(1) {
  18.   margin-right: 0;
  19. }
  21. .flowBox li a {
  22.   display: block;
  23.   margin-top: 10px;
  24.   padding: 10px;
  25.   background: #fff;
  26.   box-shadow: 3px 3px 10px 0 #666;
  27.   /*box-shadow: 3px 3px 10px 0 #666*/
  28. }
  30. .flowBox li a div {
  31.   background: url("../img/default.gif") no-repeat center center #eee;
  32.   min-height: 50px;
  33. }
  35. .flowBox li a div img {
  36.   display: block;
  37.   width: 100%;
  38. }
  40. .flowBox li a span {
  41.   display: block;
  42.   margin: 10px;
  43.   font-size: 12px;
  44.   color: #555; /*span下的文字颜色555*/
  45.   line-height: 20px;
  46. }
  • 分步骤JS代码
  1. // 瀑布流：多列的不规则排列，每一列由很多块构成，每一块宽度固定，高度不固定，按照某种规则排列，最终这些列之间高度不能相差太大。同时当页面滑动到底部时就去加载下一页，并且为图片设置懒加载功能。
  3. // 思路：首先获取我们需要的数组（假设20条，一共三列）。
  4. // 每次从数据中取三个，接着把数据绑定成html，插入到每一列中。
  5. // 为了保证插入数据后这些列的高度相差不大，在插入之前，先按照这些列的现有高度进行升序排列，然后先给最矮的插入数据？？？？
  8. // 从页面中导入方法
  9. const { win, offset, toJSON } = utils;
  11. // 1. 获取元素
  12. let flowBox = document.getElementById('flowBox');
  13. let flowList = flowBox.getElementsByTagName('li');
  15. // 2. 从服务端获取数据
  16. let imgData = null;
  17. let page = 0; // 请求的是第几页
  19. let queryData = () => {
  20.     // 真实项目中，瀑布流第一次打开时只加载第一页的数据，当用户滚动到底部时，我们才需要去请求第二页的数据。服务端的接口需要我们把请求的是第几页的数据这个参数告诉他，然后服务端会把对应页数的内容返回给前端。（分页技术）
  21.     if (page > 10) {
  22.         console.log('已经是最后一页了');
  23.         return;
  24.     }
  25.     page++;
  26.     let xhr = new XMLHttpRequest();
  27.     xhr.open('GET', `json/data.json?page=${page}`, false);
  28.     xhr.onreadystatechange = function () {
  29.         if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
  30.             imgData = toJSON(xhr.responseText);
  31.         }
  32.     };
  33.     xhr.send();
  34. };
  35. queryData();
  37. // 3. 绑定数据
  38. let bindHTML = () => {
  39.     for (let i = 0; i < imgData.length; i += 3) {
  40.         // 每三个一组，如果有10条数据，第一次取三个，取得是索引为 0 1 2的者三个，下一次取得是 3 4 5，所以i += 3（你想几个一组就i+=几）
  41.         // 假设数组一共10条，最大的索引值是9，每次取三个，在最后一次取的时候，索引为10 11的不存在。所以在使用之前还需要验证一次我们取出的是否存在
  42.         let item1 = imgData[i];
  43.         let item2 = imgData[i + 1];
  44.         let item3 = imgData[i + 2];
  46.         let flowListAry = Array.from(flowList);
  48.         flowListAry.sort((a, b) => a.offsetHeight - b.offsetHeight);
  50.         // 按照排好序的数组依次给每一列插入数据, flowListAry[0] 是最矮的
  51.         if (item1) {
  52.             flowListAry[0].innerHTML += `<a href="${item1.link}">
  53.       <div>
  54.         <img alt="" data-src="${item1.pic}">
  55.       </div>
  56.       <span>${item1.title}</span>
  57.     </a>`
  58.         }
  59.         if (item2) {
  60.             flowListAry[1].innerHTML += `<a href="${item2.link}">
  61.       <div>
  62.         <img alt="" data-src="${item2.pic}">
  63.       </div>
  64.       <span>${item2.title}</span>
  65.     </a>`
  66.         }
  68.         if (item3) {
  69.             flowListAry[2].innerHTML += `<a href="${item3.link}">
  70.       <div>
  71.         <img alt="" data-src="${item3.pic}">
  72.       </div>
  73.       <span>${item3.title}</span>
  74.     </a>`
  75.         }
  77.     }
  78. };
  80. bindHTML();
  81. lazyLoad(); // 因为刚刚绑定完数据，一定有一部分数据展示在可视区中，但是此时如果不滚动就不会去加载这些图片，所以需要再绑定数据结束后手动执行lazyLoad方法去加载图片
  83. // 4. 加载更多
  84. // 4.1 什么时候去加载更多？页面滚动到底部时去加载更多。
  85. // 4.2 我们如何知道页面滚动到底了呢？监听页面的滚动条滚动事件，实时计算是否到底
  86. let timer = null;
  87. window.onscroll = function () {
  88.     // 页面滚动就会触发 onscroll 事件，进而执行这个函数
  89.     // 如何计算页面是否滚动到底了呢？
  90.     // 页面真实的高度 - 滚动条卷去的高度 - 浏览器可视窗口的高度 === 0 表示页面已经滚动到底了
  91.     lazyLoad();
  92.     let pageH = win('scrollHeight');
  93.     let winSctop = win('scrollTop');
  94.     let winH = win('clientHeight');
  95.     if (pageH - winSctop - winH <= 200) {
  96.         // 为了提升用于体验，一般都是距离页面到底还有一段时就去加载，减少用户等待时间
  98.         timer && clearTimeout(timer); // 为了减少对请求次数，采用函数节流和防抖
  99.         timer = setTimeout(function () {
  100.             queryData();
  101.             bindHTML();
  102.             lazyLoad();
  103.         }, 300)
  104.     }
  105. };
  107. // 5. 图片延时加载（多张）
  108. function lazyLoad() {
  109.     // 1. 获取所有的 img 元素
  110.     let imgList = document.querySelectorAll('img');
  111.     // 2. 遍历 imgList，在遍历时计算每一张图片是否进入浏览器的可视窗口。
  112.     for (let i = 0; i < imgList.length; i++) {
  113.         let item = imgList[i];
  114.         if (item.src) continue;
  115.         let {top: imgOffsetTop} = offset(item);
  116.         let winSctp = win('scrollTop');
  117.         let winH = win('clientHeight');
  118.         let dataSrc = item.getAttribute('data-src');
  119.         if (imgOffsetTop - winSctp - winH <= 100) {
  120.             let newImg = document.createElement('img');
  121.             newImg.src = dataSrc;
  122.             newImg.onload = function () {
  123.                 item.src = dataSrc;
  124.                 newImg = null;
  125.             }
  126.         }
  127.     }
  128. }
  130. // 函数的节流和防抖：降低 js 代码函数的执行频率；
  • 单例模式封装
  1. let flowRender = (function () {
  2.     // 从工具库中导入方法
  3.     const {win, offset, toJSON, arrLikeToAry} = utils;
  5.     let winH = win('clientHeight'); // 获取浏览器屏幕的高度
  7.     // 1. 获取元素
  8.     let flowList = document.querySelectorAll('#flowBox li');
  10.     // 2. 请求数据的方法
  11.     let page = 0;
  13.     function queryData() {
  14.         if (page > 10) {
  15.             console.log('没有更多数据了');
  16.             return;
  17.         }
  18.         page++;
  19.         let xhr = new XMLHttpRequest();
  20.         xhr.open('GET', `json/data.json?page=${page}`, false);
  21.         xhr.onreadystatechange = function () {
  22.             if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
  23.                 let data = JSON.parse(xhr.responseText);
  24.                 bindHTML(data);
  25.             }
  26.         };
  27.         xhr.send();
  28.     }
  30.     // 3. 数据绑定
  31.     function bindHTML(data) {
  32.         for (let i = 0; i < data.length; i += 3) {
  33.             // 每次从数据中取三个数据
  34.             let dataArr = [
  35.                 data[i],
  36.                 data[i + 1],
  37.                 data[i + 2]
  38.             ];
  40.             // 2. 给页面中的三列排序
  41.             let flowListAry = arrLikeToAry(flowList);
  42.             flowListAry.sort((a, b) => a.offsetHeight - b.offsetHeight);
  43.             flowListAry.forEach((liItem, liIndex) => {
  44.                 dataArr[liIndex]
  45.                     ? liItem.innerHTML += queryHTML(dataArr[liIndex])
  46.                     : null;
  47.             })
  48.         }
  49.     }
  51.     // 3. 拼接模板字符串
  52.     function queryHTML({pic, link, title}) {
  53.         return `<a href="${link}">
  54.       <div>
  55.         <img alt="" data-src="${pic}">
  56.       </div>
  57.       <span>${title}</span>
  58.     </a>`
  59.     }
  62.     // 4. 图片懒加载
  63.     function lazyLoad() {
  64.         let imgList = document.querySelectorAll('img');
  65.         [...imgList].forEach(item => {
  66.             if (item.src) return;
  67.             let dataSrc = item.getAttribute('data-src');
  68.             let {top: imgOffsetTop } = offset(item);
  69.             let winSctp = win('scrollTop');
  71.             if (imgOffsetTop - winH - winSctp <= 100) {
  72.                 let newImg = new Image();
  73.                 newImg.src = dataSrc;
  74.                 newImg.onload = function () {
  75.                     item.src = dataSrc;
  76.                     newImg = null
  77.                 }
  78.             }
  79.         })
  80.     }
  82.     // 5. 加载更多
  83.     function loadMore() {
  84.         let pageH = win('scrollHeight');
  85.         let winSctp = win('scrollTop');
  86.         if (pageH - winSctp - winH <= 100) {
  87.             queryData();
  88.             lazyLoad();
  89.         }
  90.     }
  92.     // 5. 处理滚动
  93.     let timer = null;
  94.     function handleScroll() {
  95.         window.onscroll = function () {
  96.             timer && clearTimeout(timer);
  97.             timer = setTimeout(() => {
  98.                 lazyLoad();
  99.                 loadMore();
  100.             }, 300);
  101.         }
  102.     }
  104.     return {
  105.         init() {
  106.             queryData();
  107.             lazyLoad();
  108.             loadMore();
  109.             handleScroll();
  110.         }
  111.     }
  112. })();
  113. flowRender.init();
  • 异步编程解决图片乱序问题（了解内容）
  1. /*
  2. * 本次优化了瀑布流排列会出现偶尔插入乱序的问题，！！不要求掌握！！！只是告诉大家可以有这样的解决方案。
  3. * Promise + async + await 异步编程解决方案！！！
  4. * */
  5. let flowRender = (function () {
  6.     let timer = null;
  7.   // 获取元素
  8.   let flowList = document.querySelectorAll('#flowBox li');
  9.   // 1. 请求数据的方法
  10.   let page = 0;
  11.   let queryData = () => {
  12.     if (page > 3) {
  13.       alert('没有更多数据了！');
  14.       window.onscroll = null;
  15.       return;
  16.     }
  17.     page++;
  18.     let xhr = new XMLHttpRequest();
  19.     xhr.open('GET', `json/data.json?page=${page}`, false);
  20.     xhr.onreadystatechange = function () {
  21.       if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
  22.         let data = JSON.parse(xhr.responseText);
  23.         bindHTML(data);
  24.       }
  25.     };
  26.     xhr.send(null);
  27.   };
  29.   let resolveImg = (url) => {
  30.     return new Promise((resolve, reject) => {
  31.       let newImg = document.createElement('img');
  32.       newImg.src = url;
  33.       newImg.onload = function () {
  34.         let {width, height} = newImg;
  35.         let cal = Math.round(300 / width * height); // 按比例计算出最后图片的高度 300 是列宽 320px 减去左右 padding 10px，
  36.         resolve(cal);
  37.       };
  38.       newImg.onerror = reject;
  39.     });
  40.   };
  41.   let fetchImg = (ary) => {
  42.     let mappings = ary.map(async (item, index) => {
  43.       if (item) {
  44.         return await resolveImg(item.pic);
  45.       } else {
  46.         return 0;
  47.       }
  48.     });
  49.     return Promise.all(mappings);
  50.   };
  52.   // 2. bindHTML
  53.   async function bindHTML(data) {
  54.     for (let i = 0; i < data.length; i += 3) {
  55.       let dataArr = [
  56.         data[i],
  57.         data[i + 1],
  58.         data[i + 2]
  59.       ];
  60.       let result = await fetchImg(dataArr);
  61.       Array.from(flowList).sort(
  62.         (a, b) => a.getAttribute('data-height') - b.getAttribute('data-height')
  63.       ).forEach((li, liIndex) => {
  64.         if (dataArr[liIndex]) {
  65.           li.innerHTML += queryHTML(dataArr[liIndex]);
  66.           li.setAttribute('data-height', +li.getAttribute('data-height') + result[liIndex])
  67.         }
  68.       });
  69.       // 不使用await
  70.       // fetchImg(dataArr).then((result) => {
  71.       //   // 给三列排序
  72.       //   Array.from(flowList).sort(
  73.       //     (a, b) => a.getAttribute('data-height') - b.getAttribute('data-height')
  74.       //   ).forEach((li, liIndex) => {
  75.       //     if (dataArr[liIndex]) {
  76.       //       li.innerHTML += queryHTML(dataArr[liIndex]);
  77.       //       li.setAttribute('data-height', +li.getAttribute('data-height') + result[liIndex])
  78.       //     }
  79.       //   });
  80.       //   isRun = false;
  81.       //   lazyLoad()
  82.       // });
  83.     }
  84.     lazyLoad();
  85.   }
  87.   // 3. 拼接模板字符串
  88.   function queryHTML({link, pic, title}) {
  89.     return `<a href="${link}">
  90.       <div>
  91.         <img alt="" data-src="${pic}">
  92.       </div>
  93.       <span>${title}</span>
  94.     </a>`
  95.   }
  97.   // 4. 加载更多
  98.   function loadMore() {
  99.     window.onscroll = function () {
  100.       lazyLoad();
  101.       let pageH = document.documentElement.scrollHeight;
  102.       let winScrollTop = document.documentElement.scrollTop;
  103.       let winH = document.documentElement.clientHeight;
  104.       if (pageH - winScrollTop - winH <= 100) {
  105.         timer && clearTimeout(timer);
  106.         timer = setTimeout(() => {
  107.             queryData();
  108.         }, 300)
  109.       }
  110.     }
  111.   }
  113.   // 5. 图片懒加载
  114.   function lazyLoad() {
  115.     let imgList = document.getElementsByTagName('img');
  116.     for (let i = 0; i < imgList.length; i++) {
  117.       let item = imgList[i];
  118.       let imgOffsetTop = item.offsetTop;
  119.       let winScrollTop = document.documentElement.scrollTop;
  120.       let winH = document.documentElement.clientHeight;
  121.       let dataSrc = item.getAttribute('data-src');
  123.       if (
  124.         imgOffsetTop - winScrollTop - winH <= 100 &&
  125.         !item.src
  126.       ) {
  127.         //!item.src => 优化点：如果图片没有 src 属性时，说明 img 还没进行过懒加载。如果图片已经有 src 属性说明已经被加载过了，就不需要再进行懒加载处理了。
  128.         let newImg = document.createElement('img');
  129.         newImg.src = dataSrc;
  130.         newImg.onload = function () {
  131.           item.src = dataSrc;
  132.           newImg = null
  133.         }
  134.       }
  135.     }
  136.   }
  138.   return {
  139.     init() {
  140.       queryData();
  141.       loadMore();
  142.     }
  143.   }
  144. })();
  145. flowRender.init();

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】