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

 

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>

 

 

2、页面效果

 

 

 

推荐这些技术文章:

百度图片式的瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X...

canvas 实现签字功能 -- 支持导出生成的img 格式base64

1、html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="wid...

blob下载指定格式的文件

主要逻辑
handleExportExcel(){
exportExcel().then(res=>{
const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' }) //
const url...

img的加载失败后展示默认图片(原生+vue)

<img src="https://www.cnblogs.com/bigbang66/p/图片地址" onerror="onerror=null;src='https://www.cnblogs.com/resource/appoint/img/160.png'" alt="">

 

<img ref="loading-img" :onerror="err...

纯 CSS 实现两竖排瀑布流布局

网上搜了好几种办法,实现出来的瀑布流效果如下:

 
 
 
 
 
 
这里有个弊端,这并不符合瀑布流的原理,如果使用纯css写瀑布流,则每一块都是从上往下排列,不能做到从左到右排列,并且不会识别哪一块图片放在哪个地方合适,若是再配合动态加载,效果会特别不好
我们想要的瀑布流是什么样的?

 
 
 
&...

点击“布局类关系图”,类图一定要被折叠??

问题
<P>在vs2008的类设计器里面,一旦点击“布局类关系图”之后</P>
<P>类图一定要被折叠????</P>

最佳回答
是的

...

一个有关文字和图片的正则表达式

问题
想实现这样一个功能:
1.当内容没有图片时,很简单,即用<txt></txt>标签包含内容:<txt>这里是内容...</txt>
2.当内容有若干个图片时,文字和图片转换成这样:
  

<txt>内容。。。。</txt><img>图片地址</img>...

怎么查找html代码中的图片地址

问题
<img.+?src\s*=.*(?<gif>.+?gif).+?>
 
 

最佳回答
var imgarr = document.images
或者是这个,然后遍历得到src就可以了

...

【C#】Lazy<T> 类

官方说明:  https://docs.microsoft.com/zh-cn/dotnet/api/system.lazy-1?view=net-5.0
实例:https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/Domain/Repo...

我有一图片存放hidden里,如何让这个URL的图片等比例缩放显示在指定的img标签

问题

<input id="picture1" type="hidden" name="picture1" value="http://t1.baidu.com/it/u=4118736635,299908387&amp;fm=25&amp;gp=0.jpg" />
<img id="img" src="" alt="" />

...

文章标题:瀑布流布局图片URL以blob格式展示
文章链接:https://www.dianjilingqu.com/3479.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>