Question

我正在尝试确定是否可以使用Masonry.js / Isotope.js显示图像网格并在单击时缩放它们。砌体页面上有一个教程，介绍如何针对高度固定（https://masonry.desandro.com/extras.html#animating-item-size）的物品进行此操作。我正在尝试使用随机图像。基本上，我希望在4列布局中混合使用横向和纵向照片，并且单击应放大到整个宽度。

我已经制造了这支笔来进行说明（基于示例代码）：https://codepen.io/anon/pen/NmxYxb

虽然它确实起作用，但是却很难看，因为它先水平缩放，然后再垂直缩放。不确定如何同时执行操作，例如固定高度示例。

css：

.grid-item,
.grid-sizer {
  width: 25%;
}

.grid-item {
  float: left;
  min-height: 100px;
}

/* grid-item-content is visible, and transitions size */
.grid-item-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}


/* both item and item content change size */
.grid-item.is-expanded {
  width: 100%;
  min-height: 200px;
  max-height: 10vh;
  z-index: 2;
}

html：

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
      <img src="https://picsum.photos/300/200/?random" class="grid-item-content">
  </div>

js：

// external js: masonry.pkgd.js, classie.js

var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

grid.addEventListener( 'click', function( event ) {
  // don't proceed if item content was not clicked on
  if ( !matchesSelector( event.target, '.grid-item-content' )  ) {
    return;
  }
  var itemContent = event.target;
  setItemContentPixelSize( itemContent );

  var itemElem = itemContent.parentNode;
  itemElem.classList.toggle('is-expanded');

  // force redraw
  var redraw = itemContent.offsetWidth;
  // renable default transition
  itemContent.style[ transitionProp ] = '';

  addTransitionListener( itemContent );
  setItemContentTransitionSize( itemContent, itemElem );

  msnry.layout();
});

var docElem = document.documentElement;
var transitionProp = typeof docElem.style.transition == 'string' ?
    'transition' : 'WebkitTransition';
var transitionEndEvent = {
  WebkitTransition: 'webkitTransitionEnd',
  transition: 'transitionend'
}[ transitionProp ];

function setItemContentPixelSize( itemContent ) {
  var previousContentSize = getSize( itemContent );
  // disable transition
  itemContent.style[ transitionProp ] = 'none';
  // set current size in pixels
  itemContent.style.width = previousContentSize.width + 'px';
  itemContent.style.height = previousContentSize.height + 'px';
}

function addTransitionListener( itemContent ) {
  // reset 100%/100% sizing after transition end
  var onTransitionEnd = function() {
    itemContent.style.width = '';
    itemContent.style.height = '';
    itemContent.removeEventListener( transitionEndEvent, onTransitionEnd, false );
  };
  itemContent.addEventListener( transitionEndEvent, onTransitionEnd, false );
}

function setItemContentTransitionSize( itemContent, itemElem ) {
  // set new size
  var size = getSize( itemElem );
  itemContent.style.width = size.width + 'px';
  itemContent.style.height = size.height + 'px';
}

window.onload = function(e) {
  msnry.layout();
};

Masonry.js：缩放具有不同高度的网格项目

0 个答案: