-1

I'm using masonry.js to achieve the masonry effect on my site. However I'm having difficulty getting the images to stack in the proper places to have a gapless layout. I've made sure all the images are cropped to the right sizes so they will fit perfectly but I'm still getting gaps. Any help would be great! Thank you so much!

Here's a link to the site so far: http://zechnelson.com/missionsme

gsnerf
  • 573
  • 1
  • 4
  • 15
znels
  • 53
  • 1
  • 6

2 Answers2

1

Did you miss initializing Masonry?

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

-------------------------- OR --------------------------

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, itemSelector": ".item" }'></div>
Souvik Banerjee
  • 135
  • 1
  • 1
  • 12
  • It seems to be something else. – znels Dec 04 '13 at 20:41
  • I saw the source and wasn't able to find any of the above syntax. Did you solve the issue in another way? – Souvik Banerjee Dec 05 '13 at 06:57
  • I just added it but it's still not having the effect on it. I had it working with some other images that weren't so many different sizes, just the 400px by 600px with some half that size too. – znels Dec 05 '13 at 14:49
  • There is an "OR" between 2 codes, you have pasted both on page! Are you a newbie??? Also you are using UL>LI structure, whereas documentation instructs to use div based layout as below.
    ...
    ...
    ...
    ...
    – Souvik Banerjee Dec 05 '13 at 17:48
  • You also aren't using the class '.item' so you want to do `itemSelector:'li'` instead of `itemSelector:'.item'` - now you will see that it works. – Adam Dec 05 '13 at 17:59
0

There is an "OR" between 2 codes, you have pasted both on page! Are you a newbie???

Also you are using UL>LI structure, whereas documentation instructs to use div based layout as below.

<div id="container">
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    ...
</div>

Also add a class "item" in your style sheets as below:

.item { width: 25%; }

See the POC at http://jsfiddle.net/souviiik/GkTL6/

Souvik Banerjee
  • 135
  • 1
  • 1
  • 12