1
このCodePen（http://codepen.io/marcamos/pen/LkZByj）では、正方形、風景、または肖像画のアイソトープグリッドを設定しました。風景の幅は2倍で、肖像画は四角形の2倍です。 （CodePenでHTML、CSSのサンプル、およびJSは、この記事の一番下にある。）にかかわらず、ビューポートの幅の同位体とDOMの順序
は、私は私の上の空白領域を見ているに四角が移動するだろうと思いましたに。このスクリーンショットを参照してください：私は非常によく本当であるかもしれない... https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg
これは、同位体は、DOMの順序によって制限されているように私を打つが、同位体の石積みレイアウトは、このような事を無視して、すべての利用可能なスペースを埋めるだろうと思いました。私が間違っている？
<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');
});