photoswipe.js 這個插件應該很多小伙伴都用過。但應該也都苦于圖片是從數據接口獲取，data-size無法填寫~

下面我稍稍改了一下代碼~~~ 就可以不用傳入data-size了~~

var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],figureEl,linkEl,// size, //去掉sizelink,item;for(var i = 0; i < numNodes; i++) {figureEl = thumbElements[i]; if(figureEl.nodeType !== 1) {continue;}linkEl = figureEl.children[0]; // size = linkEl.getAttribute('data-size').split('x'); //不需要通過獲取data-sizelink = linkEl.getAttribute('href'); //獲取圖片的url// create slide objectitem = {src: linkEl.getAttribute('href'),w: parseInt(getImageWidth(link).width, 10), //直接在這里我們計算圖片的寬高即可。h: parseInt(getImageWidth(link).height, 10)};if(figureEl.children.length > 1) {// <figcaption> contentitem.title = figureEl.children[1].innerHTML;}if(linkEl.children.length > 0) {// <img> thumbnail element, retrieving thumbnail urlitem.msrc = linkEl.children[0].getAttribute('src');}item.el = figureEl; // save link to element for getThumbBoundsFnitems.push(item);}return items;};// find nearest parent elementvar closest = function closest(el, fn) {return el && ( fn(el) ? el : closest(el.parentNode, fn) );};// triggers when user clicks on thumbnailvar onThumbnailsClick = function(e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;// find root element of slidevar clickedListItem = closest(eTarget, function(el) {return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');});if(!clickedListItem) {return;}// find index of clicked item by looping through all child nodes// alternatively, you may define index via data- attributevar clickedGallery = clickedListItem.parentNode,childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for (var i = 0; i < numChildNodes; i++) {if(childNodes[i].nodeType !== 1) {continue;}if(childNodes[i] === clickedListItem) {index = nodeIndex;break;}nodeIndex++;}if(index >= 0) {// open PhotoSwipe if valid index foundopenPhotoSwipe( index, clickedGallery );}return false;};// parse picture index and gallery index from URL (#&pid=1&gid=2)var photoswipeParseHash = function() {var hash = window.location.hash.substring(1),params = {};if(hash.length < 5) {return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if(!vars[i]) {continue;}var pair = vars[i].split('=');if(pair.length < 2) {continue;}params[pair[0]] = pair[1];}if(params.gid) {params.gid = parseInt(params.gid, 10);}return params;};var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements(galleryElement);options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnailpageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};}};// PhotoSwipe opened from URLif(fromURL) {if(options.galleryPIDs) {for(var j = 0; j < items.length; j++) {if(items[j].pid == index) {options.index = j;break;}}} else {options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}if( isNaN(options.index) ) {return;}if(disableAnimation) {options.showAnimationDuration = 0;}gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();};var galleryElements = document.querySelectorAll( gallerySelector );for(var i = 0, l = galleryElements.length; i < l; i++) {galleryElements[i].setAttribute('data-pswp-uid', i+1);galleryElements[i].onclick = onThumbnailsClick;}var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.my-gallery');

下面是那個獲取圖片寬高的函數：

// 獲取圖片真實高度function getImageWidth(url) {var img = new Image();img.src = url;let obj = {}// 如果圖片被緩存，則直接返回緩存數據if (img.complete) {obj.width = img.width;obj.height = img.height;return obj} else {img.onload = function () {obj.width = img.width;obj.height = img.height;return obj}}}

好啦~
小伙伴們放心大膽的使用吧~~

總結

以上是生活随笔為你收集整理的解决：photoswipe的data-size问题-自适应宽高，终于可以不用传data-size了！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。