Using isotope javascript plugin, how can I get rid of gaps?

Question

I am trying to build a grid which takes all of the photos that a user has submitted, and lays them out into a neat grid which will reflow with the aspect ratio/resolution of the browser responsively.

Isotope looks like it's the de facto library for this. I've got everything implemented per one of their demos I viewed, and I'm using two static sizes of images (a portrait resolution of 346x533 and a landscape resolution of 520x347). As the pictures are all the same size or half the height of the other, this should be a nice grid. Problem is, it's not rendering a grid as I would expect at all. Sometimes I'm getting layouts returned which have massive gaps in them,

    HTML:
           <div class="ga">
            <div class="row">
                <div class="gridsa">
                    <div class="gridsa-sizer"></div>
                    <div class="gridsa-item">
                        <img src="img/tile1.jpg" class="img-port"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile7.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item tile3">
                        <img src="img/tile3.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile4.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile7.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile6.jpg" class="img-land"/>
                    </div>
                    <div class="gridsa-item">
                        <img src="img/tile8.jpg" class="img-land"/>
                    </div>
                </div>
            </div>
        </div>

    CSS
    * { box-sizing: border-box; }




    /* ---- isotope ---- */
    .gridsa {
     background: #ffcc33;
     margin: 0px auto;
    }

    /* clear fix */
    .gridsa:after {
    content: '';
    display: block;
    clear: both;
    }
    /* ---- .grid-item ---- */
    .gridsa-sizer,
    .gridsa-item {
       width: 33.333%;
     }

    .gridsa-item {
    padding:0px;
    float:left;
    }
   .gridsa-item img {
    display: block;
    max-width: 100%;
    position:relative;


}
.gridsa-item h2{
     color:#ffffff;
     position: absolute;
     bottom: 5%;
     left: 33.3%;
     width: 100%;
 }

.gridsa-item.tile2 h2{
    color:#ffffff;
    position: absolute;
    bottom: 1px;
    left: 25%;
    width: 50%;
}

.gridsa-item.tile3 h2{
    color:#ffffff;
    position: absolute;
    bottom: 1px;
    left: 0;
    width: 80%;
}



.ga{
    background-color: #0c5449;
}

    JS
                 <script type="text/javascript">
                    $( document ).ready(function() {
                    // init Isotope
                        var $grid = $('.gridsa').isotope({
                            itemSelector: '.gridsa-item',
                            percentPosition: true,
                            masonry: {
                                columnWidth: '.gridsa-sizer'
                            }
                        });
                        // layout Isotope after each image loads
                        $grid.imagesLoaded().progress( function() {
                            $grid.isotope('layout');
                        });
                    });
                </script>

Here is a jsfiddle of the issue, but you'll need to maximize the window and expand the html section to see the problem. https://jsfiddle.net/x6dhwh6k/2/

Answer 1

this happens because your image size is smaller than available space

to achieve desire effect apply width: 100% to your img

like

.gridsa-item img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

see updated fiddle https://jsfiddle.net/x6dhwh6k/3/

now in order to maintain image aspect ratio you might see little gap under image but I guess thats ok with isotope plugin as this is how it should works