CODEWITHSUNDEEP
jqueryhtmlcssjquery-isotope
user3169905
user3169905

Reputation: 199

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?

Upvotes: 1

Views: 1057

Answers (2)

Hunter Turner
Hunter Turner

Reputation: 6894

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.

Upvotes: 1

beogor
beogor

Reputation: 13

You need to set columnWidth to be equal with smallest .grid-item. In your case, from images with placeholders, your smallest is 200px width. http://jsfiddle.net/QsCZx/452/ 

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

Upvotes: 0

Related Questions