同位素和 DOM 阶
Isotope and DOM Order
在这个 CodePen ( http://codepen.io/marcamos/pen/LkZByj ) 中,我设置了正方形、风景或肖像图像的同位素网格,其中风景的宽度为 2 倍,肖像的高度为 2 倍广场。 (CodePen中HTML、CSS、JS的示例在本post底部。)
无论视口宽度如何,我都看到上面有一个空白区域,我认为 一个正方形会直接进入。请参阅此屏幕截图:https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg
这让我印象深刻,因为 Isotope 受到 DOM 顺序的限制……这很可能是真的,但我 认为 Isotope 的 Masonry 布局会忽略这些东西并填充所有可用 space。我错了吗?
<ul class="grid" id="grid">
<li class="grid__sizer"></li>
<li class="grid__item grid__item--landscape fadable">
<a href="#">
<figure>
<img src="http://noonsharp.design/client/tag/imgs/fpo-square/fpo-2x1.jpg" /> <!-- Landscape -->
<figcaption class="grid__meta">
<span class="grid__project-name">Project Title</span>
<span class="grid__client-name">Client</span>
</figcaption>
</figure>
</a>
</li>
<!-- ...and so on... -->
.grid__item--square,
.grid__item--portrait,
.grid__sizer {
width: 50%;
@media (min-width:$bp-medium) {
width: 33.333%;
}
}
.grid__item--landscape {
width: 100%;
@media (min-width:$bp-medium) {
width: 66.666%;
}
}
<!-- ...and so on... -->
var grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__sizer'
}
});
grid.imagesLoaded().progress(function() {
grid.isotope('layout');
});
看来我的问题的答案是:使用 Packery 布局模式而不是 Masonry,直接来自 Metafizzy:https://twitter.com/metafizzyco/status/758733290136178691
如果您访问我在上面发布的 CodePen url,您会看到它现在一切正常。
谢谢 Metafizzy!
在这个 CodePen ( http://codepen.io/marcamos/pen/LkZByj ) 中,我设置了正方形、风景或肖像图像的同位素网格,其中风景的宽度为 2 倍,肖像的高度为 2 倍广场。 (CodePen中HTML、CSS、JS的示例在本post底部。)
无论视口宽度如何,我都看到上面有一个空白区域,我认为 一个正方形会直接进入。请参阅此屏幕截图:https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg
这让我印象深刻,因为 Isotope 受到 DOM 顺序的限制……这很可能是真的,但我 认为 Isotope 的 Masonry 布局会忽略这些东西并填充所有可用 space。我错了吗?
<ul class="grid" id="grid">
<li class="grid__sizer"></li>
<li class="grid__item grid__item--landscape fadable">
<a href="#">
<figure>
<img src="http://noonsharp.design/client/tag/imgs/fpo-square/fpo-2x1.jpg" /> <!-- Landscape -->
<figcaption class="grid__meta">
<span class="grid__project-name">Project Title</span>
<span class="grid__client-name">Client</span>
</figcaption>
</figure>
</a>
</li>
<!-- ...and so on... -->
.grid__item--square,
.grid__item--portrait,
.grid__sizer {
width: 50%;
@media (min-width:$bp-medium) {
width: 33.333%;
}
}
.grid__item--landscape {
width: 100%;
@media (min-width:$bp-medium) {
width: 66.666%;
}
}
<!-- ...and so on... -->
var grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__sizer'
}
});
grid.imagesLoaded().progress(function() {
grid.isotope('layout');
});
看来我的问题的答案是:使用 Packery 布局模式而不是 Masonry,直接来自 Metafizzy:https://twitter.com/metafizzyco/status/758733290136178691
如果您访问我在上面发布的 CodePen url,您会看到它现在一切正常。
谢谢 Metafizzy!