1
이 CodePen (http://codepen.io/marcamos/pen/LkZByj)은 정사각형, 풍경 또는 세로 인 이미지의 동위 원소 그리드를 설정했습니다. 풍경은 너비가 2 배이고 인물은 사각형보다 2 배 크습니다 . 합니다 (CodePen에서 HTML, CSS의 샘플 및 JS이 게시물의 하단에 있습니다.)에 관계없이 뷰포트 폭의동위 원소 및 DOM 순서
, 나는 그 I 위의 빈 영역을보고 있어요 에게 평방 이동할 것이라고 생각 바로 안으로. 이 스크린 샷을 참조 : 동위 원소가 아주 잘 사실 수 있습니다 DOM 순서 ...에 의해 제한하지만 이 동위 원소의 벽돌 레이아웃이 같은 일을 무시하고 사용 가능한 모든 공간을 채우기 것이라고 생각되는 것으로이 날 파업 https://dl.dropboxusercontent.com/u/1851858/Grid_Demo.jpg
합니다. 내가 잘못?
<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');
});