当网格旋转时,Packery / Masonry 不尊重邮票项目
Packery / Masonry not honoring stamp items when grid is rotated
使用 Packery 时,如果我将网格旋转 45 度,标记的项目将不再影响布局。为什么会这样?
通常情况下,Packery 会围绕冲压元素布置项目。我的项目使用的是 Packery,但在调查时我发现同样的问题也发生在砌体中。
我正在使用 css 旋转网格:
.grid {
transform:rotate(-45deg);
}
您可以在 this codepen 上查看问题示例。
正如文档所解释的那样,Packery 应该在标记元素周围布置项目元素(解释 here and here)。
任何解决方法的想法也会有所帮助。
(赏金说 90 度。它应该说 45 度(正负))。
当 CSS 中定义了旋转时,初始化期间对 .layout()
的隐式调用似乎错误地呈现了旋转的标记对象。
这是一个解决方法:
- 从
.grid
中删除轮换 CSS 规则
在网格初始化后添加如下代码:
$('.grid').css({
'-webkit-transform': 'rotate(-45deg)',
'transform': 'rotate(-45deg)'
});
// 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);
});
初始化后对 $grid.packery('layout')
的任何调用似乎都会在网格旋转时出现问题。当 window 调整大小时,Packery 似乎也会回忆起 layout
。因此,需要销毁并重新创建 Packery 实例,以便旋转网格在 window 调整大小时正确显示(基本上,覆盖 Packery 的响应功能)。
显然,这也不是最理想的解决方案 - 只是另一种解决方法。
您可能想在他们的 GitHub 页面上打开问题报告以获得进一步的帮助:https://github.com/metafizzy/packery/issues
使用 Packery 时,如果我将网格旋转 45 度,标记的项目将不再影响布局。为什么会这样?
通常情况下,Packery 会围绕冲压元素布置项目。我的项目使用的是 Packery,但在调查时我发现同样的问题也发生在砌体中。
我正在使用 css 旋转网格:
.grid {
transform:rotate(-45deg);
}
您可以在 this codepen 上查看问题示例。 正如文档所解释的那样,Packery 应该在标记元素周围布置项目元素(解释 here and here)。
任何解决方法的想法也会有所帮助。
(赏金说 90 度。它应该说 45 度(正负))。
当 CSS 中定义了旋转时,初始化期间对 .layout()
的隐式调用似乎错误地呈现了旋转的标记对象。
这是一个解决方法:
- 从
.grid
中删除轮换 CSS 规则
在网格初始化后添加如下代码:
$('.grid').css({ '-webkit-transform': 'rotate(-45deg)', 'transform': 'rotate(-45deg)' });
// 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);
});
初始化后对 $grid.packery('layout')
的任何调用似乎都会在网格旋转时出现问题。当 window 调整大小时,Packery 似乎也会回忆起 layout
。因此,需要销毁并重新创建 Packery 实例,以便旋转网格在 window 调整大小时正确显示(基本上,覆盖 Packery 的响应功能)。
显然,这也不是最理想的解决方案 - 只是另一种解决方法。
您可能想在他们的 GitHub 页面上打开问题报告以获得进一步的帮助:https://github.com/metafizzy/packery/issues