user3169905 user3169905 - 6 months ago 30
jQuery Question

Isotope configuration for masonry grid

​I'm trying to achieve the following layout using the masonry grid with Isotope.

desired layout

However, the code that is generated under my current setup has some 200px offsets that I can't seem to reconcile. This results in the following layout instead. The red arrows indicate how I need the pieces to move to look like the mockup above.

current layout

Below are two sets of code. The first set is the code that generates the faulty layout. The second set is the result of manipulating the style attributes' height, left, and top selectors in Chrome Inspector to set the correct top and left pixel values. This at least simulates what I want Isotope to do.

The pattern is clear that I seem to be off by 200px in some spots and more or less in others. But when I change the jQuery init code and/or CSS to that effect, in various combinations, I don't get the result I need. My brain apparently isn't big enough to figure out the right combo.

What values do I need to change and which parameters/attributes/selectors do I need to add or remove for Isotope to automatically generate the correct masonry layout?

Incorrect Layout Code

<div class="grid" style="position: relative; height: 600px;">
<div class="grid-item grid-item--width2 grid-item--height2 wow zoomIn" style="position: absolute; left: 0px; top: 0px; visibility: visible;"><img src="img/placeholder400x400.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute; left: 600px; top: 0px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute; left: 600px; top: 200px; visibility: visible;"><img src="img/placeholder800x200.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute; left: 0px; top: 400px; visibility: visible;"><img src="img/placeholder800x200.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute; left: 600px; top: 400px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
​</div>


Correct Layout Code (after messing with it in Inspector)

<div class="grid" style="position: relative;height: 400px;">
<div class="grid-item grid-item--width2 grid-item--height2 wow zoomIn" style="position: absolute; left: 0px; top: 0px; visibility: visible;"><img src="img/placeholder400x400.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute;left: 400px; top: 0px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute;left: 600px; t;top: 0;visibility: visible;"><img src="img/placeholder800x200.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute;left: 400px;top: 200px; visibility: visible;"><img src="img/placeholder800x200.png"></div>
<div class="grid-item wow zoomIn" style="position: absolute;left: 1200px;top: 200px; visibility: visible;"><img src="img/placeholder200x200.png"></div>
​</div>


And here are the CSS and jQuery.

CSS

/* ---- grid ---- */
.grid {
max-width: 1400px;
position: relative;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 200px;
height: 200px;
}
.grid-item--width2 { width: 400px; }
.grid-item--height2 { height: 400px; }


jQuery

$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 600
}
});


I did try the obvious thing of setting
columnWidth: 400
​, but that only got me the following layout.

almost, but not quite

Close, but still off by 200 for the top placeholder and off by 400 for the bottom placeholder.

Can this specificity of layout even be achieved using Isotope?

Answer

Remove masonry: { columnWidth: 600 } and use layoutMode: 'packery' instead. Set your .grid-item width to auto, and it should work as desired.

JavaScript

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery'
});

CSS

.grid-item {
  float: left;
  width: auto;
  height: 200px;
}

Working Codepen

(or if you prefer)

Working Fiddle

*Note To use packery, you must include the packery JavaScript. I included it in the JavaScript of the pen itself because the external link wasn't working.

Comments