- A+
看到手机相册，突发奇想：能不能用实现一个原生的页面“相册”？或者说，传统网页中怎么实现图片预览功能？
如果在原生网页中使用插件，那必不可少的要引入一堆东西（并不是鄙视插件，只是为了引入下文，见谅嘿嘿）；但又不是说所有的页面都要用框架…
经过一番探索，终于大概实现了想要的功能：
大概流程就是：可以点开大图观看、可以左右滑动切换、进入预览时可以从你当前点击的那一张开始浏览。
实现相册初始展示页
如上所示，我们可以在Header头中添加Viewport配置 —— 移动端页面常备：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后在Body元素中添加小相片列表，其HTML如下：
<div class="gallery"> <div class="item"> <img src="images/39.jpg" alt="1"> </div> <div class="item"> <img src="images/download.png" alt="2"> </div> <div class="item"> <img src="images/nan.png" alt="3"> </div> <div class="item"> <img src="images/nan2.png" alt="4"> </div> <div class="item"> <img src="images/timg.jpg" alt="5"> </div> </div>
现在页面上是一张张大小不一的图片凌乱排列，然后我们给它添加样式：
.gallery{ /* 设置设置相册的宽度为屏幕宽度 */ width:100vw; /* 相册采用flex布局 */ display: flex; /* 相册每一项为横向排列，并且换行 */ flex-flow: row wrap; } .gallery .item{ /* 每一项平均排列 */ /* flex: 1; */ /* 图片宽度设置为1/3屏幕宽度 */ width:calc(100vw / 3); overflow: hidden; } .gallery .item img{ width: 100%; height: 100%; }
熟悉笔者的都知道：笔者提倡“尽可能的使用CSS去解决问题！”。所以：我们这里就要考虑这样一个问题：预览时页面的排布和原来有什么不同之处？
我的思路是：开始时总的宽度是100vw，子元素（相册图片）以flex排列；点击某一个图片预览时动态给父元素添加一个类名，这个类的作用是：将父元素下（单张）图片的最大宽度设为100vw（子元素从始至终都不设宽）。然后在js中根据子元素的长度计算其“真正宽度”（.style.width）。并根据当前点击的是第几个子元素计算应该transform偏移多少距离：
.gallery.preview{ background-color: gray; } /** 添加过渡效果 */ .gallery.animation{ -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; } .gallery.preview .item{ /* 对子项设置为flex布局 */ display: flex; /* 设置margin为auto实现图片居中显示 */ margin: auto; align-items: center; width: 100vw; height: 100vh; overflow: hidden; } .gallery.preview .item img { /* 设置预览图片的最大宽度为屏幕宽度 */ max-width: 100vw; /* 设置预览图片的最大高度为屏幕高度 */ max-height: 100vh; /* 初始化图片宽高，覆盖之前设置的宽高 */ width: initial; height: initial; }
根据上面的思路，在HTML页面加入脚本，监听Click事件：用户单击相片时，将相册切换为预览模式：
var $gallery = document.querySelector(".gallery"); $gallery.addEventListener("click", function (e) { // 监听单击事件，切换相册的CSS class来实现预览和普通模式的切换 var classList = $gallery.classList, css_preview = "preview"; if (classList.contains(css_preview)) { classList.remove(css_preview) // 在非预览模式下，相册的宽度为100vw $gallery.style.width = 100 + "vw"; //【1】 } else { classList.add(css_preview); // 进入在预览模式，所有的图片横着拍成一排，相册的总宽度为每一个项目长度总和。 $gallery.style.width = 100 * itemsLength + "vw"; //【2】 } });
在预览模式下，通过设置gallery样式类元素的宽度，让相册图片排成一排，然后通过CSS3的transform属性，设置元素的偏移量，移动整个元素位置，使得需要展示的图片出现在屏幕主区域。
在开始移动之前，我们要先禁止掉浏览器默认的触摸行为 —— 用CSS来做：
//为类“.gallery.preview”添加属性 touch-action: none;
然后去监听touchstart、touchmove及touchend事件来实现手势滑动功能
这三个事件很是常用，但其实他们的原理很简单，总结来说就是：在start（刚按下）时记录此时的手指位置——作为初始值；在move（触摸滑动）时根据实时的手指位置和初始手指位置变量实现要求判断；在end（手指离开）时（也有直接在move时进行的）进行收尾工作——比如：图片滑动完全划过去、元素跑到结束位置、将事件监听取消；
var isTtouchstart = false, startOffsetX, currentTranX = 0, width = $gallery.offsetWidth, $items = $gallery.querySelectorAll(".item"), itemsLength = $items.length, move = function (dx) { $gallery.style.transform = "translate(" + dx + "px, 0)"; }; $gallery.addEventListener("touchstart", function (e) { // 触摸开始时，记住当前手指的位置 startOffsetX = e.changedTouches[0].pageX; // $gallery.classList.remove("animation"); }); $gallery.addEventListener("touchmove", function (e) { isTtouchstart = true; // 计算手指的水平移动量 var dx = e.changedTouches[0].pageX - startOffsetX; // 调用move方法，设置galley元素的transform，移动图片 move(currentTranX + dx); }); $gallery.addEventListener("touchend", function (e) { if (isTtouchstart) { // 在移动图片的时候，需要动画，动画采用CSS3的transition实现。 $gallery.classList.add("animation"); // 计算偏移量 var dx = e.changedTouches[0].pageX - startOffsetX; // 如果偏移量超出gallery宽度的一半 if (Math.abs(dx) > width / 2) { // 处理临界值 if (currentTranX <= 0 && currentTranX > -width * itemsLength) { // 如果手指向右滑动 if (dx > 0) { // 如果图片不是显示第一张 if (currentTranX < 0) { currentTranX = currentTranX + width; } // 如果手指向右滑动，并且当前图片不是显示最后一张 } else if (currentTranX > -width * (itemsLength - 1)) { currentTranX = currentTranX - width; } } } // 如果未超出图片宽度的一半，上述条件不会执行，而这个时候，手指在移动的时候，图片随着手指移动了，通过下面的代码，将图片的位置还原 // 如果超出了图片宽度的一半，将切换到上一张／下一张图片 move(currentTranX); } isTtouchstart = false; });
到此为止，基本功能是实现了，不过感觉少了点什么：
啊，知道了：点击进入预览时始终是从第一张开始的，而且如果结束预览时不是第一张它会消失！
这显然是没有做“变量恢复”：
//在上面代码中【1】的位置添加： currentTranX = 0; $gallery.style.transform = "translate(0, 0)"; //在上面代码【2】的位置添加： for(let i in $items){ if($items[i]==e.target.parentNode){ currentTranX=-(+i)*width move(currentTranX) break } }
于是就出现了文章开头所示效果！
这个小demo是结束了，但是有一点却引起了我的关注：上面图片排列时为了防止展示问题都是让外层父容器指定宽高，然后给img元素一个宽高100%。
有没有可能让img固定宽高比呢？
能不能在所有外部宽高下都保持此宽高比呢？
padding-bottom实现比例固定图片自适应
calc() 和 background-size: cover; 都是个不错的想法，但是往兼容性、清晰度和特殊情况一看就会坏菜——比如cover在缩到一定范围时就会有部分遮盖。
但是如果padding出马，就像这样：
<div class="banner"> <img src="./images/nan.png"> </div>
.banner { padding-bottom: 60%; position: relative; } .banner > img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
Look：如此丝滑！
可以看到，无论屏幕宽度多宽，图片比例都是固定的——不会有任何剪裁，不会有任何区域缺失，布局就显得非常有弹性，也更健壮。
对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。
重要的来了： 有时候图片宽度并不是容器的100%，例如，图片宽度50%容器宽度，图片高宽比4:3，此时用padding-bottom来实现就显得666了：
/**右50%表示宽度，下66.66%表示“高宽比4:3”**/ padding: 0 50% 66.66% 0;
object-fit实现图片自适应容器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>宽高自适应</title> <style> .img-container{ width:688px; height:204px; background: black; } .img-container img{ width: 100%; height: 100%; object-fit: contain; } </style> </head> <body> <div class="img-container"> <img src="images/download.png" alt="原生图片预览实现及由此引出的图片自适应宽高问题探索" alt="4"> </div> </body> </html>
object-fit 似乎一定程度上解决了width:100%带来的一些图片宽高比问题，又结合了background-size:cover 的固定宽高比伸缩，也是比较秀的了。
“图片预览”应用场景下的js应用
其实更多场景下，看的是“图片完全、优雅地展示出来”。这时候，其实可以用JavaScript动态计算图片宽高：
- 容器宽高比例 > 图片宽高比例：说明图片比较高，以高度为准，宽度适应
- 容器宽高比例 < 图片宽高比例：说明图片比较宽，以宽度为准，高度适应
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div + div { margin-top: 30px; } .img-container{ width:688px; height:304px; overflow: hidden; display: flex; justify-content: center; align-items: center; box-sizing: border-box; background: black; } .width { width: 668px; height: 404px; } </style> </head> <body> <div class="img-container"></div> <script> const container = document.querySelector(".img-container") container.classList.add("width") const url = 'images/nan.png'; const img = document.createElement("img") img.src = url; img.onload=function(){ let {width,height} = getRealSize(container.offsetWidth,container.offsetHeight,img.width,img.height, 1) img.width = width img.height = height } container.appendChild(img) /** * [获取自适应图片的宽高] * @param {[number]} parentWidth [父容器宽] * @param {[number]} parentHeight [父容器高] * @param {[number]} imgWidth [图片实际宽] * @param {[number]} imgHeight [图片时间高] * @param {[number]} radio [撑开比例] * @return {[Obejt]} [图片真实宽高] */ function getRealSize(parentWidth, parentHeight, imgWidth, imgHeight, radio){ let real = {width:0,height:0} let scaleC = parentWidth / parentHeight; let scaleI = imgWidth / imgHeight; if(scaleC > scaleI){ //说明图片比较高 以高度为准 real.height = radio * parentHeight; real.width = parentHeight * scaleI; }else if(scaleC < scaleI){ //说明图片比较宽 以宽度为准 real.width = radio * parentWidth; real.height = parentWidth / scaleI; }else{ real.width = radio * parentWidth; real.height = parentWidth / scaleI; } return real } </script> </body> </html>
