Layout
Item sizing
All sizing and styling of items is handled by your own CSS.
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
...
</div>
.grid-item {
float: left;
width: 50px;
height: 50px;
background: #e6e5e4;
border: 2px solid #b6b5b4;
}
.grid-item--width2 { width: 100px; }
.grid-item--height2 { height: 100px; }
Responsive layouts
Item sizes can be set with percentages for responsive layouts. With the masonry
layout mode, set percentage-width columnWidth
with element sizing. Set percentPosition: true
so item positions are likewise set with percentages to reduce adjustment transitions on window resize.
<div class="grid">
<!-- width of .grid-sizer used for columnWidth -->
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
...
</div>
/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
$('.grid').isotope({
// set itemSelector so .grid-sizer is not used in layout
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
// use element for option
columnWidth: '.grid-sizer'
}
})
imagesLoaded
Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue.
Initialize Isotope, then trigger layout
after each image loads.
// init Isotope
var $grid = $('.grid').isotope({
// options...
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
Edit this demo or vanilla JS demo on CodePen
Or, initialize Isotope after all images have been loaded.
var $grid = $('.grid').imagesLoaded( function() {
// init Isotope after all images have loaded
$grid.isotope({
// options...
});
});
Edit this demo or vanilla JS demo on CodePen