当网格旋转时，包装/砌体不尊重邮票项目
当网格旋转时，包装/砌体不尊重邮票项目
提问于 2016-12-15 03:14:59
使用Packery时，如果我将网格旋转45度，已盖章的项目不再影响布局。为什么会发生这种情况？
通常，Packery会围绕已盖章的元素布局项目。我的项目是使用Packery，但在调查时，我发现同样的问题也发生在砌体中。
我使用css旋转网格：
.grid {
transform:rotate(-45deg);
}您可以在这个密码上看到这个问题的一个例子。正如文档所解释的那样，Packery应该围绕已盖章的元素(解释的这里和这里)布局item元素。
任何解决办法的想法都是有帮助的。
(赏金显示90度。应该是45度(正负))。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-21 18:21:03
在初始化过程中对.layout()的隐式调用似乎在CSS中定义旋转标记对象时不正确地呈现旋转标记对象。
这里有一个解决办法：
- 从
.grid中删除旋转CSS规则 - 在网格初始化后添加以下代码： $('.grid').css({‘-webkit-.css’)：‘旋转(-45.css)’，'transform'：‘旋转(-45.css)’}；
更新的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);
});更新的CodePen #2
看起来，初始化后对$grid.packery('layout')的任何调用都会导致网格旋转时出现问题。当窗口调整大小时，Packery似乎也会召回layout。因此，需要销毁并重新创建Packery实例，以便在窗口大小调整(基本上，覆盖Packery的响应功能)上正确显示旋转网格。
显然，这也不是最理想的解决方案--只是另一个解决办法。
您可能想在他们的GitHub页面上打开一个问题报告，以获得进一步的帮助：https://github.com/metafizzy/packery/issues
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41155854
复制相关文章
相似问题
腾讯云开发者
