How to avoid gaps in fluid grid using packery - grid

Question

I am an amateur and beginner trying to make my first web page with a fluid image grid for vertical and horizontal photos with same height. So I am applying the Packery javascript to make it more responsive.
See link to Codepen: http://codepen.io/nor159/pen/WbpWpe/?editors=110
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f0f0f0;
}
img {
width: 100%;
display: block;
}
.packery {
margin: 8% 8% 8% 8%;
}
.packery:after {
content: ' ';
display: block;
clear: both;
}
.item {
float: left;
}
#media screen and (max-width:400px) {
.item.v, .grid-sizer {
width: calc(4/14*100%);
}
.item.h {
width: calc(9/14*100%);
}
.gutter-sizer {
width: calc(1/14*100%);
}
I find 2 problems:
1) Open gaps between the images appear randomly as I resize the screen.
2) Loading in Chrome gives overlapping images.
Does anyone know how to resolve this? Can this grid be made using Packery?
Response to my questions will be highly appreciated.
Regards
Jan, Oslo

Answer 1

Not sure if this will help 100% but Using imagesLoaded(), has fixed some of my problems with masonry before. you can find more information # http://packery.metafizzy.co/appendix.html
$(document).ready(function(){
// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {
var $container = $('#container').packery({
gutter: 10,isHorizontal:false,stamp: '.stamp',itemSelector: '.item',columnWidth: '.grid-sizer'});
});
});
// multiple elements
another trick is to put the image larger than its supposed to be in the grid. The woman married to the Guy that Sings that 99 problems song => her site did this:
container img{width:105%}