瀑布流布局图片URL以blob格式展示

发布： 2022年1月3日 • 经验百科
1、完整代码

<!doctype html> <html> <head>     <style>         body {             background: #e5e5e5;         }                  #root {             margin: 0 auto;             width: 1200px;             column-count: 5;             column-width: 240px;             column-gap: 20px;         }                  .item {             margin-bottom: 10px;             break-inside: avoid;             background: #fff;         }              .item:hover {                 box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);             }                  .itemImg {             width: 100%;             vertical-align: middle;         }                  .userInfo {             padding: 5px 10px;         }          .avatar {             vertical-align: middle;             width: 30px;             height: 30px;             border-radius: 50%;         }          .username {             margin-left: 5px;             text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);         }     </style>     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body>      <div id="root"></div>      <script>         var pageIndex = 1;         /*          * 数据渲染          * */         function renderPage(data) {             var container = document.getElementById('root');             for (var i = 0; i < data.length; i++) {                 var item = document.createElement('div');                 item.className = 'item';                 var img = document.createElement('img');                 img.className = 'itemImg';                 img.alt = '封面';                 imgSrc2Blob(img, data[i].thumbnail);                 img.onload = function () {                     window.URL.revokeObjectURL(img.src);                 }                 item.appendChild(img);                 var uInfo = document.createElement('div');                 uInfo.className = 'userInfo';                 var uImg = document.createElement('img');                 uImg.className = 'avatar';                 uImg.alt = '头像';                 imgSrc2Blob(uImg, data[i].userInfo.avatar);                 uImg.onload = function () {                     window.URL.revokeObjectURL(this.src);                 };                 var uName = document.createElement('span');                 uName.className = 'username';                 uName.innerText = data[i].userInfo.name;;                 uInfo.appendChild(uImg);                 uInfo.appendChild(uName);                 item.appendChild(uInfo);                 container.appendChild(item);             }         };         // 图片网络地址转 blob 对象地址         function imgSrc2Blob(img, src) {             url2Base64(src, function (base64Data) {                                  var blob = base64ToBlob(base64Data);                 img.src = window.URL.createObjectURL(new Blob([blob]));             });         };         // 文件类型         function getFileType(file) {             var index = file.lastIndexOf('.');             return file.substring(index + 1, file.length);         };         // 图片 url 转 base64         function url2Base64(url, callback) {             var type = getFileType(url);             var mime = 'image/' + type + '';             var canvas = document.createElement('canvas');             var img = new Image();             img.crossOrigin = 'Anonymous';             img.onload = function () {                 canvas.width = img.naturalWidth;                 canvas.height = img.naturalHeight;                 canvas.getContext('2d').drawImage(img, 0, 0);                 var dataUrl = canvas.toDataURL(mime);                 callback.call(this, dataUrl);                 canvas = null;             };             img.src = url;         };         // base64 转 blob         function base64ToBlob(base64Data) {             var arr = base64Data.split(','), mime = arr[0].match(/:(.*?);/)[1], data = atob(arr[1]), n = data.length, u8arr = new Uint8Array(n);             while (n--) {                 u8arr[n] = data.charCodeAt(n);             }             return new Blob([u8arr], { type: mime });         };          window.onscroll = function () {                          if ($(window).scrollTop() >= ($(document).height() - $(window).height())) {                 pageIndex += 1;                 loadData(pageIndex);             }         }          function loadData(pageIndex) {             $.ajax({                 url: '/home/index',                 type: 'get',                 contentType: 'application/json',                 data: {                     pageIndex: pageIndex,                     pageSize: 50                 },                 dataType: 'json',                 success: function (res) {                     debugger                     renderPage(res);                 },                 error: function (e) {                  }             })         };         $(function () {             loadData(pageIndex);         })      </script> </body> </html>
搜索内容

瀑布流布局图片URL以blob格式展示

1、完整代码

2、页面效果

推荐这些技术文章：
