jquery - Alignment issues with masonry -

i know these masonry questions tend specific , cumbersome. time stuck , can't figure out why bottom row isn't floated 1 row.

what got without masonry (just float left):

what masonry:

what expect:

html

<ul class="js-tiles tiles">     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/400/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/400/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-ite"><a href="#" class="tiles-link"><img src="http://lorempixel.com/300/190/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li>     <li class="js-tiles-item tiles-item"><a href="#" class="tiles-link"><img src="http://lorempixel.com/130/190/" class="tiles-img"></a></li> </ul> 

css

.tiles {     display: block;     width: 1150px;     list-style: none;     margin: 0 auto;     padding: 0;     overflow: hidden; } .tiles .tiles-item {     padding: 0;     margin: 0 0 20px 0;     display: inline-block;     overflow: hidden;     background-color: #ff69b4;     font-size: 0; } .tiles .tiles-item .tiles-img {     max-width: 100%; } 

js

$(function() {     var $tiles = $('.js-tiles');     var options = {         itemselector: '.js-tiles-item',         columnwidth: 300,         gutter: 20     };      $tiles.imagesloaded( function() {         $tiles.masonry(options);     }); }); 

codepen playing

anyone got idea?

change columnwidth 150

var options = {         itemselector: '.js-tiles-item',         columnwidth: 150,         gutter: 20     };