当网格旋转时，Packery / Masonry 不尊重邮票项目

Question

使用 Packery 时，如果我将网格旋转 45 度，标记的项目将不再影响布局。为什么会这样？

通常情况下，Packery 会围绕冲压元素布置项目。我的项目使用的是 Packery，但在调查时我发现同样的问题也发生在砌体中。

我正在使用 css 旋转网格：

.grid {
  transform:rotate(-45deg);
}

您可以在 this codepen 上查看问题示例。正如文档所解释的那样，Packery 应该在标记元素周围布置项目元素（解释 here and here）。

任何解决方法的想法也会有所帮助。

（赏金说 90 度。它应该说 45 度（正负））。

Answer 1

当 CSS 中定义了旋转时，初始化期间对 .layout() 的隐式调用似乎错误地呈现了旋转的标记对象。

这是一个解决方法：

从 .grid

在网格初始化后添加如下代码：

$('.grid').css({
  '-webkit-transform': 'rotate(-45deg)',
  'transform': 'rotate(-45deg)'
});

Updated CodePen

// external js: packery.pkgd.js

$('.grid').packery({
  itemSelector: '.grid-item',
  stamp: '.stamp'
});

$('.grid').css({
  '-webkit-transform': 'rotate(-45deg)',
  'transform': 'rotate(-45deg)'
});

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/*--- grid ---*/

.grid {
  background: #DDD;
  max-width: 1200px;
  position: relative;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #C09;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }

.stamp {
  position: absolute;
  width: 30%;
  height: 120px;
  background: #C90;
  border: 4px dotted hsla(0, 0%, 0%, 0.5);
}

.stamp1 {
  left: 20%;
  top: 0px;
}

.stamp2 {
  right: 10%;
  top: 110px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://mfzy.co/packery.pkgd.js"></script>

<h3>Packery - stamp option with rotated grid</h3>

<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
</div>

编辑 - 解决方法 #2：

要处理响应，您可以将 JavaScript 更改为以下内容：

// external js: packery.pkgd.js

var $grid = $('.grid').packery({
  itemSelector: '.grid-item',
  stamp: '.stamp'
});

function updateCSS(deg) {
  $('.grid').css({
    '-webkit-transform': 'rotate(' + deg + 'deg)',
    'transform': 'rotate(' + deg + 'deg)'
  });
}

updateCSS(-45);

$(window).resize(function() {
  updateCSS(0);
  $grid.packery('destroy');
  $grid = $('.grid').packery({
    itemSelector: '.grid-item',
    stamp: '.stamp'
  });
  updateCSS(-45);
});

Updated CodePen #2

初始化后对 $grid.packery('layout') 的任何调用似乎都会在网格旋转时出现问题。当 window 调整大小时，Packery 似乎也会回忆起 layout。因此，需要销毁并重新创建 Packery 实例，以便旋转网格在 window 调整大小时正确显示（基本上，覆盖 Packery 的响应功能）。

显然，这也不是最理想的解决方案 - 只是另一种解决方法。

您可能想在他们的 GitHub 页面上打开问题报告以获得进一步的帮助：https://github.com/metafizzy/packery/issues

当网格旋转时，Packery / Masonry 不尊重邮票项目

Packery / Masonry not honoring stamp items when grid is rotated

jquery

css

jquery-masonry

masonry

packery